css中关于:nth-child()和:nth-of-type()的深入理解

最新推荐文章于 2024-03-09 00:46:14 发布

Jonny Jiang-zh

最新推荐文章于 2024-03-09 00:46:14 发布

阅读量523

点赞数

分类专栏： web前端文章标签： css css3

本文链接：https://blog.csdn.net/weixin_45571140/article/details/107984109

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

css中关于:nth-child()和:nth-of-type()的深入理解

在css中有这样一类属性，是以:nth-开头的，其中最常见的就是:nth-child() 和 :nth-of-type()，两者既有相同的地方，也有不同的地方。

相同的地方：都是修改父级下的的几个同级的元素的样式
不同的地方：:nth-child()是修改父元素下的同级元素的第n个元素内的样式，但是:nth-of-type()是修改父元素下的同级元素的第n个同类型元素的样式。例如：p:nth-of-type(2)就是修改p元素的父级元素下的与p同级的第二个p元素的样式；p:nth-child(2)就是修改p元素的父级元素下的与p同级的第二个元素的样式。

<style>
		/* 修改body下面的第二个元素的样式，注意是同级元素**/
		body :nth-child(2) {
			color: red;
		}
		/* 修改body下面的每一种元素的第二个元素的样式，注意是同级元素*/
		body :nth-of-type(2) { 
			color: green;
		}
	</style>

<body>
    <a href="#">测试a</a>
    <div>测试div</div>
    <p>测试p</p>
    <a href="#">测试a</a>
    <div>测试div</div>
    <p>测试p</p>
    <b>测试b</b>
    <div>测试div</div>
    <p>测试p</p>
    <a href="#">测试a</a>
    <b>测试b</b>
	<p>测试p</p>
</body>

结果如下：

Jonny Jiang-zh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
css中关于:nth-child()和:nth-of-type()的深入理解

css中关于:nth-child()和:nth-of-type()的深入理解在css中有这样一类属性，是以:nth-开头的，其中最常见的就是:nth-child() 和 :nth-of-type()，两者既有相同的地方，也有不同的地方。相同的地方：都是修改父级下的的几个同级的元素的样式不同的地方：:nth-child()是修改父元素下的同级元素的第n个元素内的样式，但是:nth-of-type()是修改父元素下的同级元素的第n个同类型元素的样式。例如：p:nth-of-type(2)就是修改p元素的
复制链接

扫一扫