跨多個父級設定特定第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;
}