P粉4666433182023-08-15 14:26:12
不是真的..
#它是一個獨立的選擇器,不與類別組合。在你的規則中,它只需要同時滿足兩個選擇器,所以如果:nth-child(even)
表格行也有.row
類,它將顯示。
P粉5634465792023-08-15 11:04:17
這是一個非常常見的問題,它是由於對: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]
使用不同技巧的其他解決方案留給讀者作為練習;這只是一個簡短的、刻意的範例。
1 如果指定了類型或通用選擇器,則它必須放在第一位。然而,這並不會改變選擇器的基本工作原理;它只是一個語法上的怪癖。
2 最初提出的是:nth-match()
,然而,因為它仍然只計算相對於其同級元素,而不是與滿足給定選擇器的每個其他元素,所以自2014年以來,它已被重新用作現有的:nth-child()
的擴展。