如何通过css :nth-child选择特定子元素-css教程-PHP中文网

如何通过css :nth-child选择特定子元素

P粉602998670

发布： 2025-09-24 12:51:02

原创

970人浏览过

:nth-child(an+b)按子元素位置匹配，a为周期，n为变量，b为偏移；可选奇偶项、第几个或每几个元素，如2n+1选奇数项，3n+5从第5起每3个选1，-n+4选前4个，4n选4的倍数项；注意索引从1开始且基于所有子元素，非同类标签用:nth-of-type。

如何通过css :nth-child选择特定子元素

使用 CSS 的 :nth-child 伪类可以选择父元素下的特定子元素，按它们在文档流中的位置进行匹配。它非常灵活，可以选中奇数项、偶数项，或者第几个、每几个元素。

:nth-child(an + b) 是核心公式，其中：

比如 2n+1 表示“每两个中的第一个”，即奇数项。

下面是一些实用的写法和对应效果：

选择奇数位置的子元素

常用于表格隔行变色：

tr:nth-child(odd) {
  background-color: #f2f2f2;
}

登录后复制

选择偶数位置的子元素

配合上面实现斑马条纹：

tr:nth-child(even) {
  background-color: #e6e6e6;
}

登录后复制

选择第 3 个子元素

只选中第三个：

腾讯元宝

腾讯混元平台推出的AI助手

223

li:nth-child(3) {
  color: red;
}

登录后复制

从第 5 个开始，每 3 个选一次（5, 8, 11, ...）

公式是 3n+5：

div:nth-child(3n+5) {
  border-top: 1px solid #ccc;
}

登录后复制

选择前 4 个子元素

使用负系数加偏移：

li:nth-child(-n+4) {
  font-weight: bold;
}

登录后复制

每 4 个元素选中一个（如 4, 8, 12, ...）

section:nth-child(4n) {
  margin-bottom: 20px;
}

登录后复制

:nth-child 计算的是父元素下所有子元素的位置，不管类型是否一致。例如：

<ul>
  <li>第一项</li>
  <p>段落（不是 li）</p>
  <li>第二项</li>
</ul>

登录后复制

此时第二个 li 实际上是第 3 个子元素，所以要用 li:nth-child(3) 才能选中。

如果只想根据同类标签排序，应使用 :nth-of-type。

把 an + b 中的 n 替换为 0, 1, 2, 3... 看结果：

基本上就这些，掌握公式后可以精准控制页面中的任意位置元素。关键是理解索引是从 1 开始，且计算基于所有子节点的位置。不复杂但容易忽略细节。

以上就是如何通过css :nth-child选择特定子元素的详细内容，更多请关注php中文网其它相关文章！

大家都在看：