為多個父級中的特定第n 個子級設定樣式
使用第n 個子級選擇器設定嵌套元素的樣式時，需要注意的是，選擇器在單父上下文中運行。當針對多個父級中的特定子元素時，這可能會帶來挑戰。
問題：
考慮以下標記：
<div class="foo">
<ul>
<li>one</li>
<li>two</li>
</ul>
<ul>
<li>three</li>
</ul>
<ul>
<li>four</li>
</ul>
</div>目標是為.foo 中的第一個和第三個li 元素設定樣式。使用以下 CSS：
.foo li:nth-child(1),
.foo li:nth-child(3)
{
color: red;
}此方法不起作用，因為 nth-child 選擇每個 ul 的第一個和第三個子級。
解：
單獨使用 CSS，不可能定位多個父級中的第 n 個子級。但是，還有其他解決方案：
<div class="foo">
<ul>
<li class="first">one</li>
<li>two</li>
</ul>
<ul>
<li class="third">three</li>
</ul>
<ul>
<li>four</li>
</ul>
</div>然後，使用新加入的類別來設定它們的樣式：
.foo li.first,
.foo li.third
{
color: red;
}以上是如何在 CSS 中為多個父級中的特定 n 個子級設定樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
