如何将 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中文网其他相关文章！