css伪类选择器中:nth-child()和:nth-of-type()的区别

简单的html标签

<p class="ni">段落1</p>
    <p class="ni">段落2</p>
    <p class="ni">段落3</p>
    <p>段落4</p>
    <span class="ni">span1</span><span class="ni">span2</span>
    <span class="ni">span3</span><span class="ni">span4</span><span>span5</span>
    <p>段落5</p>
    <p>段落6</p>
    <p>段落7</p>
    <p>段落8</p>

使用:nth-child(n):

css样式：

p:nth-child(5){  
            color:red
        }
        p:nth-child(12){
            color:red
        }

由样式可以看到，设置了两个属性却只由一个标签变为了红色，就是哪个标签没有生效呢，答案是：p:nth-child(5)

解释一下：p:nth-child(5) 是找到p标签的父元素后，找到其子元素（也就是由p和span组成的）中的第5个标签，如果此时的第5个元素是p标签，则颜色改变，如果不是p标签，此伪类无效。

同理p:nth-child(12)是找到p标签的父元素后，找到其子标签的第12个元素，此时为p标签，所以颜色生效

使用:nth-of-type(n)

p:nth-of-type(5){
            color:red
        }
        span:nth-of-type(2){
            color:red
        }

 

由样式可以看到，第五个p标签生效变为红色，第二个span标签生效变为红色

解释一下：p:nth-of-type(5) 是找到p标签的父级后，找到其子标签中的第5个p标签。也就是说，无论p标签中间插入了多个其他标签，都会跳过，只寻找p标签。

.ni:nth-of-type(3){
            color:blue
        } 

 可以发现：根据类名去寻找时，寻找有类名属性的标签，此时有两个不同的标签都有类名，所以两种标签都会进行查找。

解释一下：.ni:nth-of-type(3)是先查看有此.ni类名的标签，有p标签和span标签，先拿p标签举例。会查找p标签中第3个元素，如果此时的p标签拥有.ni的类名，则此样式生效，如果没有，则不生效。

同理span标签也会这样进行查找，所以会出现同时选中多个标签的情况