如何在 CSS 中為多個父級中的特定 n 個子級設定樣式

為多個父級中的特定第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 個子級。但是，還有其他解決方案：

• JavaScript: 像jQuery 這樣的函式庫可以輕鬆操作DOM 元素並選擇特定元素，例如$('.foo li:eq( 0), .foo li:eq(2)').
• 明確標記： 明確向第一個和第三個li 元素添加類別或ID，例如：

<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中文網其他相關文章！