一、:nth-child选择器

1.1 用法

格式
p:nth-child(2){color：red}
含义
表示p元素的父类元素的第二个子元素是p标签，再这样的前提下，那么它的样式是：color=red

1.2 代码

1.2.1 代码实例01

选择父元素是div的第三个子元素span，以及父元素是div的第六个子元素span。

css样式

html结构


        
            墨雨love薏雪01
            墨雨love薏雪02
            第一个span标签
            墨雨love薏雪03
            墨雨love薏雪04
            第二个span标签
            墨雨love薏雪05
            第三个span标签

运行效果

图1-1 运行结果

通过运行效果可以看出，属于其父元素的第三个子元素的span元素为蓝色，属于其父元素的第六个子元素的span元素为红色。

1.2.2 代码实例02

如果我想要选中属于其父元素的第三个子元素的p元素呢，有符合条件的p元素吗？

css样式

html结构


        
            墨雨love薏雪01
            墨雨love薏雪02
            第一个span标签
            墨雨love薏雪03
            墨雨love薏雪04
            第二个span标签
            墨雨love薏雪05
            第三个span标签

运行效果

图1-2 运行结果

上面给出的样式是想将属于父元素div的第三个子元素p变成红色，但是，div的第三个子元素是span。所以并没有符合条件的p元素存在，当然也不会有对应的效果了。

二、:nth-of-type选择器

2.1 用法

格式
p:nth-of-type(2){color:red}
含义
在p元素的父类元素中，从出现p元素的地方开始算起，且只算p元素的个数，这样的前提下，第2个标签的样式为color=red。

2.2 代码

2.2.1 代码实例01

选择属于其父元素div的第三个p元素，以及属于其父元素div的第一个span元素。

css样式

html结构


        
            墨雨love薏雪01
            墨雨love薏雪02
            第一个span标签
            墨雨love薏雪03
            墨雨love薏雪04
            第二个span标签
            墨雨love薏雪05
            第三个span标签

运行效果

图1-3 运行结果

由上图可以看出，nth-of-type是根据元素的类型来选择的，碰到同一类型就+1。它不取决于只有在父元素的第n个元素的位置上的时候，才能达到效果。

它首先是在其父元素下的该元素的第几个，侧重点变了。

2.2.2 代码实例02

再来看看两者的区别：
上代码：

css样式

html结构


        
            墨雨love薏雪01
            墨雨love薏雪02
            第一个span标签
            墨雨love薏雪03
            墨雨love薏雪04
            第二个span标签
            墨雨love薏雪05
            第三个span标签

运行效果

图1-4 运行结果

三、总结

nth-child ：根据个数来计算
nth-of-type ：根据类型来计算

@墨雨出品 必属精品 如有雷同 纯属巧合
`非学无以广才，非志无以成学！`

01-:nth-child和:nth-of-type选择器