我可以结合：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 != 1 ， b != 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-child和nth-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-child和nth-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问题正在扩展到如何更精确地匹配类的细节。
