为多个父级中的特定第 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中文网其他相关文章！
