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