一、: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样式
<style>
span:nth-child(3){
color: #ff0000;
}
span:nth-child(6){
color: #3333ff;
}
</style>
- html结构
<body>
<div>
<p>墨雨love薏雪01</p>
<p>墨雨love薏雪02</p>
<span>第一个span标签</span>
<p>墨雨love薏雪03</p>
<p>墨雨love薏雪04</p>
<span>第二个span标签</span>
<p>墨雨love薏雪05</p>
<span>第三个span标签</span>
</div>
</body>
- 运行效果
图1-1 运行结果
通过运行效果可以看出，属于其父元素的第三个子元素的span元素为蓝色，属于其父元素的第六个子元素的span元素为红色。
1.2.2 代码实例02
如果我想要选中属于其父元素的第三个子元素的p元素呢，有符合条件的p元素吗？
- css样式
<style>
p:nth-child(3){
color: #ff0000;
}
</style>
- html结构
<body>
<div>
<p>墨雨love薏雪01</p>
<p>墨雨love薏雪02</p>
<span>第一个span标签</span>
<p>墨雨love薏雪03</p>
<p>墨雨love薏雪04</p>
<span>第二个span标签</span>
<p>墨雨love薏雪05</p>
<span>第三个span标签</span>
</div>
</body>
-
运行效果
图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样式
<style>
p:nth-of-type(3){
color: #ff0000;
}
span:nth-of-type(1){
color: #3333ff;
}
</style>
- html结构
<body>
<div>
<p>墨雨love薏雪01</p>
<p>墨雨love薏雪02</p>
<span>第一个span标签</span>
<p>墨雨love薏雪03</p>
<p>墨雨love薏雪04</p>
<span>第二个span标签</span>
<p>墨雨love薏雪05</p>
<span>第三个span标签</span>
</div>
</body>
-
运行效果
图1-3 运行结果
由上图可以看出，nth-of-type是根据元素的类型来选择的，碰到同一类型就+1。它不取决于只有在父元素的第n个元素的位置上的时候，才能达到效果。
它首先是在其父元素下的该元素的第几个，侧重点变了。
2.2.2 代码实例02
再来看看两者的区别：
上代码：
- css样式
<style>
p:nth-child(4){
color: #ff0000;
}
p:nth-of-type(4){
color: #3333ff;
}
</style>
- html结构
<body>
<div>
<p>墨雨love薏雪01</p>
<p>墨雨love薏雪02</p>
<span>第一个span标签</span>
<p>墨雨love薏雪03</p>
<p>墨雨love薏雪04</p>
<span>第二个span标签</span>
<p>墨雨love薏雪05</p>
<span>第三个span标签</span>
</div>
</body>
- 运行效果
图1-4 运行结果
三、总结
nth-child ：根据个数来计算
nth-of-type ：根据类型来计算
@墨雨出品 必属精品 如有雷同 纯属巧合
`非学无以广才，非志无以成学！`
网友评论