![7275569-a93d0d5efdcbc3c3.jpg](https://i-blog.csdnimg.cn/blog_migrate/3e27095d4f2a7f95b6946947c8195b61.webp?x-image-process=image/format,png)
0001.jpg
子代类型选择符与子代选择符的作用很相似,不过子代类型选择符用于选取特定类型子代HTML标签。
:first-of-type
这个选择符的作用与:first-child类似,不过选取的是首次出现的特定类型的子代标签。假如侧边栏的类为sidebar,若想为侧边栏里的第一个段落定义样式,可以使用下面的方法:
HTML代码
<div class="sidebar">
<h1>侧边栏</h1>
<p>段落文本1</p>
<p>段落文本2</p>
<p>段落文本3</p>
</div>
CSS代码
.sidebar p:first-of-type {
font-weight: bold;
color: orange;
}
![7275569-e5380147b4c35926.png](https://i-blog.csdnimg.cn/blog_migrate/a37e0a14e397fd16037661285dc77d0b.webp?x-image-process=image/format,png)
image.png
:last-of-type
:last-of-type的作用与:last-child类似,不过选取的是最后一个特定类型的子代标签。比如想设定类为sidebar这个侧边栏的最后一个段落的样式。
HTML代码
<div class="sidebar">
<h1>侧边栏</h1>
<p>段落文本1</p>
<p>段落文本2</p>
<p>段落文本3</p>
</div>
CSS代码
.sidebar p:last-of-type {
font-weight: bold;
color: orange;
}
![7275569-2c53f0cc710da4a6.png](https://i-blog.csdnimg.cn/blog_migrate/815a8a2e330c535d594298ba93a73a7a.webp?x-image-process=image/format,png)
image.png
:nth-of-type
这个选择符的作用与:nth-child()类似,不过选取的是相隔的特定类型的子代标签。
如果一大段文字中间掺杂着一些图片,此时就体现出这个选择符的作用了。
例如
HTML代码
<p>
黑麦面包看起来沉甸甸的,质地相当扎实。
<img src="images/timg1.jpg" alt="">...内容...
<img src="images/timg2.jpg" alt="">...内容...
<img src="images/timg3.jpg" alt="">...内容...
<img src="images/timg4.jpg" alt="">...内容...
不能过于清单而输给面包风味。
</p>
CSS代码
img:nth-of-type(odd) {
float:left;
}
img:nth-of-type(even){
float:right;
}
![7275569-f7e6e98c77df468d.png](https://i-blog.csdnimg.cn/blog_migrate/5c76ce6ae257f4f2894c3e91fda61c03.webp?x-image-process=image/format,png)
image.png
:nth-of-type 和 :nth-child() 一样,都可以使用关键字(odd或even)和公式。
希望以上笔记对大家有帮助。
我的其他笔记在微信公众号:Rabbit_svip
欢迎前来点评~
![7275569-f001e80691eba65a.jpg](https://i-blog.csdnimg.cn/blog_migrate/19b04cfe4ef4e8db8639d86cc6ba9ea0.webp?x-image-process=image/format,png)
qrcode_for_gh_6c5c0ec5e65b_258.jpg