区别:
ele:nth-child(n),先计算是第几个节点,2,然后再判断选择器。指父元素下第n个元素且这个元素为ele,若不是,则选择失败。
:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,
但是如果在nth-child和 nth-of-type前不指定标签呢?
<style>
.demo :nth-child(2) {
color: #ff0000;
}
.demo :nth-of-type(2) {
color: #00ff00;
}
</style>
<ul class="demo">
<p>first p</p>
<li>first li</li>
<li>second li</li>
<p>second p</p>
</ul>
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词(第一个子元素的下标是 1)。
nth-child(odd) --偶数
nth-child(even) --基数
:not(:first-child)--不是第一个
:nth-child(n+2) 其中nth-child表示第几个son,n+2表示从第二个开始(即所有的n都是取从0开始的自然数)
:nth-last-child(n+2) ,:not(:last-child)这样获取除最后一个div中所有的div
注意:要为同一个父元素
选择第一个类型为.process的元素
<div class="payback">
<div>
<div class="process">第一个div</div>
<p>123</p>
</div>
<div>
<div class="process">第er个div</div>
<p>123</p>
</div>
<div>
<div class="process">第sn 个div</div>
<p>123</p>
</div>
</div>
style为
.payback div:nth-child(1) {
background-color: red
}
结果为
样式为
.payback div:first-of-type div.process {
background-color: yellow
}
结果为
ele:first-of-type{} ele:nth-of-type(表达式):{} ele:nth-child() ele:first-child{} ele:last-child{} ele-last-of-type{} ele选择当前ele的兄弟元素