CSS3-nth-child() 选择器的使用

最新推荐文章于 2025-01-17 17:25:59 发布

原创最新推荐文章于 2025-01-17 17:25:59 发布 · 916 阅读

0 ·

CC 4.0 BY-SA版权

CSS3 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了CSS3的nth-child()选择器，包括如何选择父元素的第n个子元素，以及如何选择奇数和偶数子元素。通过实例代码，展示了如何针对不同场景灵活运用这一选择器。

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

:nth-child(n) 选择属于其父元素的第 n 个子元素；n 可以是一个数字，一个关键字，或者一个公式

相对于父级做参考，选择所有子元素中匹配元素的奇数子元素；被选中的元素符合匹配条件且为奇数个的元素

.dl_box dd:nth-child(odd){
	color: skyblue;
}

相对于父级做参考，选择所有子元素中匹配元素的偶数子元素

.dl_box dd:nth-child(even){
	color: red;
}

HTML 代码：

<dl class="dl_box">
	<dt>我的颜色</dt>
	<dd>颜色</dd>
	<dd>颜色</dd>
	<dd>颜色</dd>
	<dd>颜色</dd>
	<dd>颜色</dd>
	<dt>我的颜色</dt>
	<dd>颜色</dd>
</dl>

在这里插入图片描述
相对于父级做参考，选择所有子元素中匹配的第 n 个子元素；n 从零开始自加，第零个元素或超出了元素的个数时会被忽略

.dl_box dd:nth-child(n){
	color: yellow;
}

在这里插入图片描述
相对于父级做参考，选择所有子元素中匹配的元素且该元素为第 2 个子元素

.dl_box dd:nth-child(2) {
	color: blue;
}

在这里插入图片描述
相对于父级做参考，选择所有子元素中匹配元素的偶数子元素

ul li:nth-child(2n) {
	color: green;
}

<ul>
	<li>li 元素</li>
	<li>li 元素</li>
	<li>li 元素</li>
	<li>li 元素</li>
	<li>li 元素</li>
	<li>li 元素</li>
	<li>li 元素</li>
	<li>li 元素</li>
	<li>li 元素</li>
	<li>li 元素</li>
</ul>

在这里插入图片描述