CSS3 : nth-child 和 nth-of-type 傻傻分不清

本文详细对比了CSS中nth-child与nth-of-type选择器的区别,通过实例解释了两者如何匹配元素,强调了nth-child匹配任意类型的子元素,而nth-of-type仅匹配指定类型的子元素。

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

之前使用CSS的时候一直使用的是nth-child,今天重新学习了下,发现还有个nth-of-type,用起来不是那么顺畅,主要是对这两个选择器还是不太理解,今天就来彻底搞明白这两个选择器到底有什么区别。

E:nth-child(n)

匹配一个E元素,且该元素是其父元素的第n个子元素

<div>
	<h3>热点文章</h3>
	<ul id="news">
		<li>1、This is a Rabbit!</li>
                <p>我是P元素</p>
		<li>2、There are two Rabbits!</li>
		<li>3、哟呵!又来一个!</li>
		<li>4、计数君,快来!</li>
		<li>5、醉了醉了</li>
		<li>6、没人了吧!</li>
	</ul>
</div>

使用 li:nth-child(2)设置样式,会发现没有元素起作用,因为没有这么一个“是其父元素的第二个子元素”的li元素,ul的第二个子元素是p

E:nth-of-type(n)

匹配一个E元素,且该元素是其父元素的第n个E元素

使用 li:nth-of-type(2)设置样式,会发现“2、There are two Rabbits!”被成功设置样式 !

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值