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>
.