css3 选择器_CSS3伪类选择器 :nthchild() 和 :nthoftype() 避坑

一、事件背景

今天一个技术群的同学问我，为什么  :nth-child(2n) 匹配到是奇数行元素呢，不是应该匹配的偶数行吗？

二、查找问题

收到他的问题，就直接向他要了代码截图，毕竟看代码是最直接的。代码简化如下：

<div class="pic-list">
    <span class="list-title">图片列表span>
    <div class="pic-item">1div>
    <div class="pic-item">2div>
    <div class="pic-item">3div>
    <div class="pic-item">4div>
div>

---

.pic-item:nth-child(2n) {
     background-color: #0099CC;
}

上面代码的实际效果如下图：

看到上面这段代码和效果图，你是否发现了问题呢？如果你已经发现了问题所在，那么这篇文章你已经不用再往下看了。可是如果你没有发现问题所在，那么就请你再往下看看：)

三、发现问题

上面的问题关键点就在于 图片列表 。对于 :nth-child 伪类有非常重要的一点，也是大家经常踩坑的一点，那就是 :nth-child 伪类匹配元素时是不论元素类型的。什么意思呢？

就是虽然你代码定义的是  div.pic-item:nth-child(2n)，但是做运算时，span.list-title 也会参与计算。span.list-title 参与计算是什么意思呢？就是说，计数的时候会把 span.list-title 也算进去。如下图：

也就是说只要是 div.pic-item 的同级兄弟元素，不论元素类型是什么都会参与到计算中。所以 span 标签会加入计算，因此，最开始的问题也就出来了，表面上看好像是匹配到了奇数行元素，实际上呢？是你还没弄明白:nth-child伪类的匹配原理。

四、解决问题

既然已经知道了原因，那么我们要怎么解决它呢？那就是下一位要登场的伪类选择器 :nth-of-type()了。:nth-of-type() 伪类选择器和 :nth-child() 伪类选择器有什么区别呢？

:nth-child() 计算的时候不会区分元素类型，只要是兄弟元素都会参与计算，而 :nth-of-type() 是会区分元素类型的，比如 div.pic-item:nth-of-type(2n) 那么它就只会匹配 div 标签类型的元素，不会匹配其他元素(span)。

修改后的代码如下：

<div class="pic-list">
    <span class="list-title">图片列表span>
    <div class="pic-item">1div>
    <div class="pic-item">2div>
    <div class="pic-item">3div>
    <div class="pic-item">4div>
div>

---

.pic-item:nth-of-type(2n) {
    background-color: #0099CC;
}

效果图如下：

酱，我们想要的效果出来啦，大家学废了嘛：)