有没有办法选择与任意选择器匹配(或不匹配)的每个第 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>
.