伪类:nth-child()和:nth-of-type()最简单的区分、理解

:nth-child()和:nth-of-type()常见的取值有：

数字（1,2,3....），倍数（2n，3n....），奇数（odd），偶数（even）

本文的实例代码：主要为1个不带有li类的div标签，三个带有li类h1、h2、p、div

<div class="box">

    <div>这是没有.li的div</div>

    <h1 class="li">这是h1-1</h1>

    <p class="li">这是p-1</p>

    <div class="li">这是div-1</div>

    <h2 class="li">这是h2-1</h2>

    <h1 class="li">这是h1-2</h1>

    <h2 class="li">这是h2-2</h2>

    <div class="li">这是div-2</div>

    <p class="li">这是p-2</p>

    <h1 class="li">这是h1-3</h1>

    <div class="li">这是div-3</div>

    <p class="li">这是p-3</p>

    <h2 class="li">这是h2-3</h2>

</div>

:nth-child()的简单方式的理解:

1,先计算是第几个节点，2,然后再判断选择器。

例如：

（1） p:nth-child(3)：

1,先算节点：同父的第三个节点，2,然后判断选择器：是不是p标签选择器。结果：同父的第三个节点若是p标签选择器就运用样式。

效果图：

（2） .li:nth-child(3)

1,先算节点：同父的第三个节点，2,然后判断选择器：是不是.li选择器。结果：同父的第三个节点若是.li选择器就运用样式。

:nth-child()的用法就是这样比较简单，:nth-of-type()就复杂一些。

:nth-of-type()的简单方式理解：

1,先将同父节点按照标签分组，2,按照分组后的标签计算是第几个节点，3,然后再判断选择器

例如：

(1) p:nth-of-type(3)

1,先将标签分组（h1,h2,div,p...）,2每组的第三个节点，3,是不是p标签。

效果图：

将这些标签进行分类后，选择p标签的第三个运用样式。

（2） .li:nth-of-type(3) 1,先将标签分组（h1,h2,div,p...）,2每组的第三个节点，3,是不是.li选择器

效果图：

1,内部的分组：

2,所有的分组的第三个节点即：div-2,h1-3,h2-3,p-3

3,判断是否为li类。

总结：这是在不断的改变实例和查看他们的属性，所总结得出的。如有不对之处，欢迎大家评论通知。我将随时更改。

 

微信小程序【My简历】有需要的可以了解一下：张三的简历

 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------如遇到问题：+WX：WAZJ-0508，及时联系---------------------------------------------------------------------------------------------------------------------------------------------------