跨多个父级嵌套第 n 个子元素设置样式

寻求一种解决方案以在不同的父结构中设置特定嵌套元素的样式，请考虑以下标记:

• one
• two

• three

• four

目标是将样式应用于“一”和“三”，无论它们是否是第一个子级

限制 :nth-child()

尝试使用 :nth-child() 会失败，因为它仅适用于以下元素共享同一个父母。在这种情况下，CSS 选择器 .foo li:nth-child(1)、.foo li:nth-child(3) 将仅针对每个

的第一个子级。

Alternative解决方案

JavaScript：

使用像 jQuery 这样的库，您可以使用 JavaScript 强大的过滤功能来选择元素。例如，以下脚本将定位 .foo 容器中的第一个和第三个

• 元素：

  $('.foo li:eq(0), .foo li:eq(2)')

  显式元素标记：

  您可以使用类或 ID 显式标记所需元素，以便通过 CSS 进行选择。例如，向第一个和第三个

• 元素添加类：

• one
• two

然后，你可以使用CSS来定位标记的元素：

.foo .first,
.foo .third {
    color: red;
}