可以與任意選擇器組合使用的方法可以是在偽類 :nth-child() 或 :nth-of-type() 中使用另一個選擇器

Question

有沒有一種方法可以選擇每個滿足（或不滿足）任意選擇器的第n個子元素？例如，我想選擇每個奇數表格行，但在行的子集內：

table.myClass tr.row:nth-child(odd) {
  …
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- 我想要這個 -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- 還有這個 -->
    <td>Row
</table>

但是:nth-child()似乎只算所有的tr元素，而不管它們是否是"row"類的，所以我最終得到的是一個偶數的"row"元素，而不是我要找的兩個。同樣的情況也發生在:nth-of-type()上。

有人可以解釋為什麼嗎？

Answer 1

不是真的..

來自文件的引用

#

它是一個獨立的選擇器，不與類別組合。在你的規則中，它只需要同時滿足兩個選擇器，所以如果:nth-child(even)表格行也有.row類，它將顯示。

Answer 2

這是一個非常常見的問題，它是由於對:nth-child(An B)和:nth-of-type()的工作原理的誤解而引起的。

在選擇器3級中，:nth-child()偽類別計算的是在同一父元素下的所有同級元素中的位置，而不僅僅是匹配選擇器的其餘部分的同級元素。

同樣地，:nth-of-type()偽類別計算的是與其共享相同元素類型的同級元素，這在HTML中是指標簽名，而不是選擇器的其餘部分。

這也意味著，如果同一父元素的所有子元素都是相同的元素類型，例如表格主體只有tr元素或列表元素只有li元素，那麼:nth-child()和:nth-of-type()的行為將是相同的，即對於每個An B的值，:nth-child( An B)和:nth-of-type(An B)將符合相同的一組元素。

事實上，在給定的複合選擇器中的所有簡單選擇器，包括:nth-child()和:not()等偽類，都是獨立工作的，而不是查看由選擇器的其餘部分匹配的子集元素。

這也意味著在每個單獨的複合選擇器中，簡單選擇器之間沒有順序的概念^#1，這意味著例如以下兩個選擇器是等價的：

table.myClass tr.row:nth-child(odd)
table.myClass tr:nth-child(odd).row

翻譯成英文，它們的意思都是：

^{(你會注意到我在這裡使用了無序列表，只是為了強調這一點)}

#選擇器4級試圖透過允許:nth-child(An B of S)^#2接受任意選擇器參數S來修正這個限制，這是由於選擇器在複合選擇器中獨立操作，根據現有的選擇器語法來決定。所以在你的情況下，它會是這樣的：

table.myClass tr:nth-child(odd of .row)

當然，作為一個全新的提議在全新的規範中，這可能要等到幾年後才會實現。

同時，您將需要使用腳本來過濾元素並相應地套用樣式或額外的類別名稱。例如，以下是使用jQuery的常見解決方法（假設表格中只有一個包含tr元素的行組）：

$('table.myClass').each(function() {
  // 注意，令人困惑的是，jQuery的过滤伪类是从0开始索引的，而CSS的:nth-child()是从1开始索引的
  $('tr.row:even').addClass('odd');
});

對應的CSS為：

table.myClass tr.row.odd {
  ...
}

如果您使用的是Selenium等自動化測試工具，或使用BeautifulSoup等工具來解析HTML，許多這些工具都允許使用XPath作為替代方法：

//table[contains(concat(' ', @class, ' '), ' myClass ')]//tr[contains(concat(' ', @class, ' '), ' row ')][position() mod 2)=1]

使用不同技巧的其他解決方案留給讀者作為練習；這只是一個簡短的、刻意的範例。

---

¹ _{如果指定了類型或通用選擇器，則它必須放在第一位。然而，這並不會改變選擇器的基本工作原理；它只是一個語法上的怪癖。}

² _{最初提出的是:nth-match()，然而，因為它仍然只計算相對於其同級元素，而不是與滿足給定選擇器的每個其他元素，所以自2014年以來，它已被重新用作現有的:nth-child()的擴展。}