如何在不同的父結構中設定特定嵌套元素的樣式？

跨多個父元素設定嵌套第n 個子元素的樣式

尋求一種解決方案以在不同的父結構中設定特定巢狀元素的樣式，請考慮以下標記:

<p></p>

<br><div class="foo">
<pre class="brush:php;toolbar:false"><ul>
    <li>one</li>
    <li>two</li>
</ul>
<ul>
    <li>three</li>
</ul>
<ul>
    <li>four</li>
</ul>

<p></p>

目標是將樣式應用於“一”和“三”，無論它們是否是每個

的第一個子級。

:nth-child()

嘗試使用 :nth-child() 會失敗，因為它只適用於共享相同父級的元素。在這種情況下，CSS 選擇器.foo li:nth-child(1)、.foo li:nth-child(3) 將僅針對每個
.<p></p>

的第一個子級替代解決方案

JavaScript：

使用像jQuery 這樣的函式庫允許您使用JavaScript 強大的過濾功能來選擇元素。例如，以下腳本將針對第一個和第三個
• .foo 容器中的元素：<p></p>

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

  明確元素標記：

  您可以使用類別或ID 明確標記所需元素，以便透過CSS 進行選擇。例如，將類別新增到第一個和第三個
• 中。元素：<p></p>

  <p></p>

  
  

  <li class="first">one</li>
  <li class="second">two</li>

<p></p>

<li class="third">three</li>

< ;/ul> <p></p>

<li class="fourth">four</li>

然後，你可以使用CSS來定位標記的元素:<p></p>

以上是如何在不同的父結構中設定特定嵌套元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！