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

Master_bigRabbit

于 2019-02-23 18:09:28 发布

阅读量217

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： CSS3

本文链接：https://blog.youkuaiyun.com/Master_bigRabbit/article/details/87895109

CSS3 专栏收录该内容

0 篇文章

订阅专栏

本文详细对比了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