我可以结合:nth-​​child()或:nth-​​of-type()与任意select器?

有没有办法select匹配(或不匹配)任意select器的每个第n个孩子? 例如,我想要select每个奇数的表行,但在行的一个子集内:

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元素,不pipe它们是否是“row”类,所以我最终得到了一个“row”元素,而不是我正在寻找的两个元素对于。 同样的事情发生在:nth-of-type()

有人能解释为什么吗?

这是一个非常普遍的问题,这是由于对以下方面的误解而产生的:nth-child():nth-of-type()工作。 不幸的是,目前还没有基于select器的解决scheme,因为select器没有提供匹配第n个孩子的方法,匹配基于诸如奇数,偶数或任何an+b的任意select器,其中a != 1b != 0 。 这不仅仅是类select器,还包括select器,否定和简单select器的更复杂的组合。

:nth-child()伪类在同一父辈下的所有兄弟姐妹之间计数元素。 它不会只计算与select器其余部分匹配的兄弟。 类似地, :nth-of-type()伪类计算共享相同元素types的兄弟元素,它引用HTML中的标记名称,而不是select器的其余部分。

这也意味着,如果同一父元素的所有子元素都具有相同的元素types,例如在只有子元素为tr元素的表体或只有子元素为li元素的列表元素的情况下,则:nth-child():nth-of-type()将performance相同,也就是说对于每an+b值, :nth-child(an+b):nth-of-type(an+b)将匹配相同的集合的元素。

实际上,给定复合select器中的所有简单select器(包括伪类,如:nth-child():not()都是相互独立工作的,而不是查看其余部分匹配的元素的子集的select。

这也意味着在每个单独的复合select器 1 内的简单select器之间没有顺序的概念 ,这意味着例如以下两个select器是等价的:

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

翻译成英文,都是指:

select任何匹配以下所有独立条件的tr元素:

  • 它是父母的一个奇数孩子;
  • 它有“行”类; 和
  • 它是具有类“myClass”的table元素的后代。

(你会注意到我在这里使用了一个无序的列表,只是为了把这个观点带回家)

由于目前没有纯粹的CSS解决scheme,因此您必须使用脚本来过滤元素并相应地应用样式或额外的类名称。 例如,以下是使用jQuery的常用解决方法(假设表中只有一个用tr元素填充的行组):

 $('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这样的自动化testing工具,或者使用像lxml这样的工具处理HTML,那么许多这些工具都允许XPath作为替代方法:

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

其他使用不同技术的解决scheme将留给读者阅读。 这只是一个简单的,人为的例子。


对于什么是值得的,有一个扩展的build议:nth-child()添加到select器级别4的:nth-child()表示法 ,用于select与给定select器匹配的每个第n个孩子的特定目的。 2

用来过滤匹配的select器作为参数提供给:nth-child() ,同样是由于select器如何按照现有select器语法的规定在一个序列中相互独立地进行操作。 所以在你的情况下,它会看起来像这样:

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

(一个精明的读者会立即注意到,这应该是:nth-child(odd of tr.row) ,因为简单select器tr:nth-child()也是相互独立运作的。接受select器的函数伪类的问题,我不想在这个答案的中间打开一堆蠕虫,相反,我将假设大多数站点没有任何其他元素而不是tr元素作为表体中的彼此的兄弟姐妹,这将使得任一选项在function上等同)。

当然,作为一个全新规格的全新build议,这可能在几年之后才会实现。 同时,你必须坚持使用脚本,如上所述。


1 如果指定了一个types或通用select器,它必须先到达。 然而,这并不能改变select者的根本工作方式。 这只不过是一个句法怪癖。

2 最初的build议是:nth-match() ,但是因为它仍然只计算一个元素相对于它的同胞,而不是每个其他元素匹配给定的select器,它自2014年以来被重新作为一个扩展现有的:nth-child()代替。

不是真的..

从文档引用

:nth-child伪类匹配在文档树中具有+ b-1 兄弟元素的元素,对于给定的正值或零值,并具有父元素。

它是一个自己的select器,不与类结合。 在你的规则中,它必须同时满足两个select器,所以它将显示:nth-child(even)表格行,如果它们碰巧具有.row类。

nth-of-type根据元素的相同types的索引工作,但是nth-child只根据索引工作,不pipe是哪种types的同类元素。

例如

 <div class="one">...</div> <div class="two">...</div> <div class="three">...</div> <div class="four">...</div> <div class="five">...</div> <div class="rest">...</div> <div class="rest">...</div> <div class="rest">...</div> <div class="rest">...</div> <div class="rest">...</div> 

假设在上面的html中我们要隐藏所有具有rest类的元素。

在这种情况下, nth-childnth-of-type将完全相同,因为所有的元素都是相同types的<div>所以css应该是

 .rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){ display:none; } 

要么

 .rest:nth-of-type(6), .rest:nth-of-type(7), .rest:nth-of-type(8), .rest:nth-of-type(9), .rest:nth-of-type(10){ display:none; } 

现在你一定想知道nth-childnth-of-type nth-child之间有什么区别,所以这是不同的

假设html是

 <div class="one">...</div> <div class="two">...</div> <div class="three">...</div> <div class="four">...</div> <div class="five">...</div> <p class="rest">...</p> <p class="rest">...</p> <p class="rest">...</p> <p class="rest">...</p> <p class="rest">...</p> 

在上面的html中, .rest元素的types与其他的不同.rest是段落,其他的是div,所以在这种情况下,如果你使用的是nth-child你必须这样写

 .rest:nth-child(6), .rest:nth-child(7), .rest:nth-child(8), .rest:nth-child(9), .rest:nth-child(10){ display:none; } 

但如果你使用nth的types的 CSS可以是这个

 .rest:nth-of-type(1), .rest:nth-of-type(2), .rest:nth-of-type(3), .rest:nth-of-type(4), .rest:nth-of-type(5){ display:none; } 

由于.rest元素的types是<p>所以这里的nth-of-type是检测.rest的types,然后在<p> nth-of-type .rest元素上应用css。

你可以用xpath来做到这一点。 像/ //tr[contains(@class, 'row') and position() mod 2 = 0]可能工作。 还有其他的SO问题正在扩展到如何更精确地匹配类的细节。