CSS中的选择器nth-child(n)和nth-of-type(n)的区别

最新推荐文章于 2022-04-25 11:23:25 发布

小k铁柱

最新推荐文章于 2022-04-25 11:23:25 发布

阅读量1.3k

点赞数 1

分类专栏：笔记文章标签： css html html5

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_40890601/article/details/106177088

版权

CSS中nth-child(n)和nth-of-type(n)的主要区别在于，nth-child(n)考虑所有子元素的位置，而nth-of-type(n)仅针对特定类型的元素。nth-child(n)会筛选出所有子元素中的第n个，然后判断是否是所需类型的元素；而nth-of-type(n)则先过滤出指定类型的元素，再选取第n个。例如，在一个包含多个元素的上下文中， nth-child(2)可能选中的是非p元素的第二个子元素，而nth-of-type(2)则会选中第二个p元素，并分别设置不同的字体颜色。

摘要由CSDN通过智能技术生成

nth-child(n)和nth-of-type(n)的区别

区别就是后者多了一个类型限制，不计算出现的其他子元素，只算该类型。
注意: 冒号 “：”之前之后一定不能有空格，不然不会生效。
举个栗子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

最低0.47元/天解锁文章

评论 2

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。