:nth-child(n) 是按DOM位置序号匹配子元素的选择器，需同时满足“第n个位置”和“目标标签”双重条件；与:nth-of-type不同，它计数所有子元素而非仅同类元素。
:nth-child(n) 是 CSS 中用于精确定位父元素下第 n 个子元素的选择器，它不关心元素类型，只按 DOM 树中的位置序号匹配。
直接写数字即可选中对应位置的子元素。例如：
li:nth-child(1) → 选中第一个 <li>（且该 <li> 恰好是父元素的第一个子元素）
<li>
li:nth-child(3) → 选中第三个子元素，且这个子元素必须是 <li>
⚠️ 注意：如果第 n 个子元素不是目标标签（比如是 <p></p> 或文本节点），则不会被选中 —— :nth-child 匹配的是“位置 + 标签”双重条件。
使用关键词或公式更灵活：
立即学习“前端免费学习笔记（深入）”；
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-child(n) 数的是所有子元素的顺序；:nth-of-type(n) 只数同类型元素的顺序。
例如父容器内为：<p></p>
<li>A
<li>B
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>）
实际使用时容易出错，注意以下几点：
:nth-of-type 或给列表加统一 class 后用 :nth-child
<li>可配合伪类组合使用，例如 li:nth-child(2):hover 表示仅对第二个列表项生效的悬停效果
以上就是css列表中指定第n项如何选中_使用:nth-child(n)选择器精确定位的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
165
收藏
