是否可以將 :nth-child() 或 :nth-of-type() 與任何選擇器結合使用？

Question

是否有辦法選擇與任意選擇器相符（或不符）的第 n 個子元素？例如，我想選擇每個奇數表行，但在行的子集中：

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

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

但是:nth-child() 似乎只是計算所有tr 元素，無論它們是否屬於「row」類，所以我最終得到了一個even 「行」元素而不是我正在尋找的兩個元素。 :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()）都可以工作彼此獨立，而不是查看與選擇器其餘部分相符的元素子集。

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

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

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

^{（你會注意到我在這裡使用了無序列表，只是為了讓大家明白這一點）}

#選擇器等級4 試圖透過允許 來修正此限制:nth-child(An B of S)² 接受任意選擇器參數S，同樣是由於複合選擇器中選擇器如何彼此獨立地操作，如下所示由現有選擇器語法決定。所以在你的情況下，它看起來像這樣：

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

當然，作為全新規範中的全新提案，這可能要等到$('table.myClass').each(function() { // Note that, confusingly, jQuery's filter pseudos are 0-indexed // while CSS :nth-child() is 1-indexed $('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() 的擴展。}