本文详解 :nth-child() 与 :first-child 的行为差异，指出常见误用原因，并提供可靠方案——使用 > div:first-child 组合选择器精准定位嵌套结构中的首个目标元素。
本文详解 `:nth-child()` 与 `:first-child` 的行为差异，指出常见误用原因，并提供可靠方案——使用 `> div:first-child` 组合选择器精准定位嵌套结构中的首个目标元素。
在 CSS 选择器实践中，一个高频误区是误用 :nth-child(1)（或 :first-child）来“全局选取第一个目标元素”。例如，面对如下 HTML 结构：
<div class="item"> <div><table>1</table></div> <div><table>2</table></div> <div><table>3</table></div> </div>
若希望仅给显示 “1” 的 ✅ 正确解法是明确层级路径 + 限定父级位置： 该选择器含义清晰： 总结：CSS 选择器始终基于 DOM 树的父子关系进行匹配，不存在“文档内首个某标签”的全局索引逻辑。要实现“容器中第一个特定结构的后代”，必须通过逐层限定父容器位置（如 <table> 添加样式，写成 <code>.item table:nth-child(1) { ... } 是无效的。原因在于：:nth-child(1) 判断的是该元素在其直接父元素的所有子元素中是否排第 1 位，而非在整个 .item 容器中“第一个出现的 <table>”。<p>在此例中：</p>
<ul><li>每个 <code><table> 的父元素都是 <code><div>；<li>而每个 <code><div> 内部仅包含一个 <code><table>，因此每个 <code><table> 都是其父 <code><div> 的 <code>:nth-child(1) —— 导致全部匹配，样式被应用到所有三个表格。.item > div:first-child table {
background-color: #ffeb3b;
font-weight: bold;
}
.item > div:first-child：选取 .item 的第一个直接子 <div>（即包裹 <code>1 的那个 <div>）；<li>
<code>table：再选其内部的 <table> 元素。<p>⚠️ 注意事项：</p>
<ul><li>不可省略 <code>>（子选择器），否则 .item div:first-child table 可能意外匹配深层嵌套中其他符合条件的 <div>；<li>
<code>:first-child 与 :nth-child(1) 在单一层级中效果相同，但语义更直观；若需兼容老版本 IE（:first-child 支持度更优；<div> 前可能有注释或文本节点），应改用 <code>:nth-of-type(1) 配合元素名（如 .item > div:nth-of-type(1) table），确保只按元素类型计数。> :first-child）来达成精确控制。
