如何在CSS中針對多位父母的第n個孩子？

CSS：跨多個父級定位第n 個子元素

問題

考慮以下HTML 結構：

<code class="html"><div class="foo">
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
  <ul>
    <li>three</li>
  </ul>
  <ul>
    <li>four</li>
  </ul>
</div></code>

目標是將清單項目「一」和「三」設定為紅色。但是，使用 CSS 選擇器：

<code class="css">.foo li:nth-child(1),
.foo li:nth-child(3)</code>

為每個 ul 的第一個子元素設定樣式。

解

僅 CSS 方法：

不幸的是，僅使用 CSS 無法在多個父級中選擇第 n 個子級。 :nth-child() 和同級組合器都不允許進行此類選擇。

Javascript 或 DOM 操作：

要實現此類目標，您可以訴諸 Javascript 或 DOM操縱技術。例如，使用 jQuery：

<code class="javascript">$('.foo li:eq(0), .foo li:eq(2)').css('color', 'red');</code>

類別或 ID 標記：

或者，您可以使用類別或 ID 明確標記目標清單項目。例如：

<code class="html"><div class="foo">
  <ul>
    <li class="target">one</li>
    <li>two</li>
  </ul>
  <ul>
    <li class="target">three</li>
  </ul>
  <ul>
    <li>four</li>
  </ul>
</div></code>

然後，使用標記的類別或 ID 進行樣式設定：

<code class="css">.foo .target {
  color: red;
}</code>

以上是如何在CSS中針對多位父母的第n個孩子？的詳細內容。更多資訊請關注PHP中文網其他相關文章！