css列表中指定第n项如何选中_使用:nth-child(n)选择器精确定位

:nth-child(n) 是按dom位置序号匹配子元素的选择器，需同时满足“第n个位置”和“目标标签”双重条件；与:nth-of-type不同，它计数所有子元素而非仅同类元素。

:nth-child(n) 是 css 中用于精确定位父元素下第 n 个子元素的选择器，它不关心元素类型，只按 DOM 树中的位置序号匹配。

基础用法：选中固定序号的项

直接写数字即可选中对应位置的子元素。例如：

<li> li:nth-child(1) → 选中第一个 <li>（且该 <li> 恰好是父元素的第一个子元素）

<li> li:nth-child(3) → 选中第三个子元素，且这个子元素必须是 <li>

⚠️ 注意：如果第 n 个子元素不是目标标签（比如是 <p></p> 或文本节点），则不会被选中 —— :nth-child 匹配的是“位置 + 标签”双重条件。

常见模式：选中偶数、奇数、倍数项

使用关键词或公式更灵活：

立即学习“前端免费学习笔记（深入）”；

<li> li:nth-child(odd) → 选中第 1、3、5… 个 <li>

<li> li:nth-child(even) → 选中第 2、4、6… 个 <li>

<li> li:nth-child(3n) → 选中第 3、6、9… 个 <li>（3 的倍数）

<li> li:nth-child(3n+1) → 选中第 1、4、7… 个 <li>

<li> li:nth-child(3n+2) → 选中第 2、5、8… 个 <li>

与 :nth-of-type 的关键区别

:nth-child(n) 数的是所有子元素的顺序；:nth-of-type(n) 只数同类型元素的顺序。

ghiblitattoo

用AI创造独特的吉卜力纹身

175

查看详情

例如父容器内为：<p></p> <li>A

<li>B

<li> li:nth-child(2) ✅ 匹配 “A”，因为 <li>A

是第二个子元素

<li> li:nth-child(1) ❌ 不匹配任何 <li>，因为第一个子元素是 <p></p>

<li> li:nth-of-type(1) ✅ 匹配 “A”，它是第一个 <li>（忽略中间的 <p></p>）

实用技巧：避开常见陷阱

实际使用时容易出错，注意以下几点：

<li>确保父元素结构稳定，子元素顺序变化会直接影响匹配结果

<li>空白文本节点（如换行、缩进）在旧版 IE 中可能被算作子元素，影响序号计算

<li>想只针对某类元素做循环样式（如隔行变色），优先考虑 :nth-of-type 或给列表加统一 class 后用 :nth-child

<li>可配合伪类组合使用，例如 li:nth-child(2):hover 表示仅对第二个列表项生效的悬停效果

以上就是