有没有办法选择与任意选择器匹配（或不匹配）的每个第 n 个子项？例如，我想选择每个奇数表行，但在行的子集内：table.myClass ...
有没有办法选择与 任意选择器匹配（或不匹配）的 ？例如，我想选择每个奇数表行，但在行的子集内：
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\' 类，所以我最终得到了一个 偶数 \'row\' 元素，而不是我要找的两个。同样的事情也发生在 :nth-of-type() .
有人能解释一下为什么吗？
nth-of-type 根据元素相同类型的索引工作，但 nth-child 无论兄弟元素是什么类型，都只能根据索引工作。
例如
<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 方式完全相同，因为所有元素都是同一类型，所以 <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 有什么区别，这就是区别
假设 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 与其他元素不同，其他 .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-of-type 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元素的类型是，<p>所以这里nth-of-type检测的类型.rest，然后他在第 1、第 2、第 3、第 4、第 5 个元素上应用 css<p>.