跨多個父級嵌套第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

pre>

然後，你可以使用CSS來定位標記的元素：

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