首先是二者的区别
:nth-child(n)
是选择父元素的第n个子元素。
:nth-of-type(n)
是选择父元素的第n个同类型的子元素
举个例子:
<div>
<h1>title1</h1>
<p>paragraph1</p>
<p>paragraph2</p> <!-- 设为红色 -->
</div>
/* nth-child */
p:nth-child(3) {
color: red;
}
/* nth-of-type */
p:nth-of-type(2) {
color: red;
}
结果:
如果改为
p:nth-child(2) {
color: red;
}
结果:
p:nth-child(2)
选择的是第2个子元素,且是p元素。(先找第2个,再找是不是p)
p:nth-of-type(2)
则是选择第2个为p的子元素。(先找p,再找第2个)
使用类名的时候(重点)
平时写样式的时候,直接使用标签名还是比较少的,最多的还是类名。
.class:nth-child(n)
还是一样,选择第n个子元素,且含有.class
类名的元素。(虽然结果是这样,但这个说法还是不准确的,其实就是一个交集选择器,写成:nth-child(n).class
就容易理解了吧,大概)
但是.class:nth-of-type(n)
是否也是选择第n个同类名的元素呢?
我之前一直是这么以为的,而且因为使用的时候没出现过差错,所以就想当然的认为是没错的。
所以,是的,这是不对的。
找了很多说明这两个选择的使用的介绍,但都没有说过与类名结合起来的使用。这里做一个踩坑的记录。
先说结论吧:
.class:nth-of-type(n)
匹配的时候,是寻找到.class
所在的标签,然后匹配element:nth-of-type(n).class
的
即先找到有.class
类的标签,然后匹配第n个该标签的子元素,然后还要求匹配到的元素类名为class
举个例子:
<div>
<h1>title1</h1>
<p class="test">paragraph1</p>
<p class="test2">paragraph2</p>
<span class="test">span1</span>
<span class="test test2">span2</span> <!-- 设为红色 -->
</div>
.test:nth-of-type(2) {
color: red;
}
结果:
如果改成.test2:nth-of-type(2)
呢?
第2个p.test2
也成了红色。
总结
要总结的话,应该是说:nth-child
和:nth-of-type
只会对标签生效,加上类名只是普通的交集选择器。就好像.a.b
这样的选择器一样,只不过.class:nth-of-type
这样的写法容易引起误会罢了。(我就深受其害啊,o(╥﹏╥)o)
补充猜想:
很可能所有的伪类选择器,甚至还有伪元素选择器都只对标签生效。