跨多个父级设置特定第 n 个子级的样式

使用第 n 个子级选择器设置嵌套元素的样式时，需要注意的是，选择器在单父上下文中运行。当针对多个父级中的特定子元素时，这可能会带来挑战。

问题：

考虑以下标记：

    

        
one
        
two
    
    

        
three
    
    

        
four
    

目标是为 .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，如：

    

        
one
        
two
    
    

        
three
    
    

        
four
    

然后，使用新添加的类设置它们的样式：

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