【css3】选择器 :nth-of-type(n)和:nth-child(n) 的区别

本文深入解析CSS中的:nth-of-type(n)和:nth-child(n)选择器的使用方法,前者用于匹配同一父元素下特定类型的第n个子元素,后者则匹配所有类型子元素中的第n个。同时介绍了:first-child和:last-child选择器的增强效果,帮助开发者更精准地控制网页样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

:nth-of-type(n) : 在同一父元素下, 同类子元素第n个

:nth-child(n) : 在同一父元素下,所有子元素第n个

搭配以下两个食用效果更佳:

:first-child

:last-child

(1)nth-of-type(n) 

h1标签被忽略,p标签是第几个就是第几个

 

(1)nth-child(n) 

h1标签也被算进去,p标签从上往下排是第几个

 

POST:https://www.w3school.com.cn/cssref/css_selectors.asp

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值