如何將 CSS 樣式套用到具有不同子結構的特定元素？

使用:nth-child 跨多個父級設定樣式

問題：

確保CSS 選擇器影響多個父級中的特定元素具有不同子元素結構的父母可能具有挑戰性。考慮以下範例：

<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>

目標是將特定樣式套用於「一」和「三」清單項目。但是，使用 :nth-child(1) 和 :nth-child(3) 選擇器會導致每個 ul 元素中的第一個和第三個清單項目具有樣式。

解決方案：

不幸的是，CSS 選擇器本身無法處理父子結構中的此類變化。 :nth-child() 選擇器和兄弟組合器僅限於選擇同一父級中的元素。

替代方法：

• JavaScript： 庫，例如jQuery 可用於根據 DOM 中的索引或位置來定位特定元素。
• 明確標記： 將類別或 ID 新增至所需元素（在本例中為 1 和 3 個）允許使用 CSS 選擇器進行精確定位。

例如，將「selected」類別加入 .foo 元素內的第一個和第三個清單項目：

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

CSS:

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

以上是如何將 CSS 樣式套用到具有不同子結構的特定元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！