本文详解 :nth-child() 的常见误用场景，说明为何 .item table:nth-child(1) 会错误匹配所有表格，并提供真正可靠的解决方案：使用层级限定 + :first-child 组合选择器。
本文详解 `:nth-child()` 的常见误用场景，说明为何 `.item table:nth-child(1)` 会错误匹配所有表格，并提供真正可靠的解决方案：使用层级限定 + `:first-child` 组合选择器。
在 CSS 选择器实践中，一个高频误区是混淆「元素在其父容器中的位置」与「目标元素在整棵树中的逻辑顺序」。以如下 HTML 结构为例：
<div class="item"> <div><table>1</table></div> <div><table>2</table></div> <div><table>3</table></div> </div>
若尝试用 .item table:nth-child(1) 为仅含数字 1 的 <table> 设置样式，结果却是<strong>所有三个 <code><table> 都被选中——这看似反直觉，实则完全符合 CSS 规范。<p>原因在于：<code>:nth-child(1) 是针对每个父元素单独计算的。此处每个 <table> 都位于各自的 <code><div> 内，且均为该 <code><div> 的<strong>唯一子元素</strong>（即第 1 个子元素），因此全部满足 <code>:nth-child(1) 条件。换言之，:nth-child() 不关心“整个 .item 下第几个 <table>”，而只看“这个 <code><table> 在它<strong>直接父元素</strong>中是否排第 1”。<p>✅ 正确解法是<strong>明确路径层级</strong>，通过父子关系（<code>>）+ 语义化定位（:first-child）双重约束：
立即学习“前端免费学习笔记（深入）”；
.item > div:first-child table {
/* 仅作用于第一个 <div> 内的 <table> */
background-color: #e0f7fa;
font-weight: bold;
}该选择器含义清晰：
-
.item > div:first-child：选取.item的直接子元素中第一个<div>；<li>后续 <code>table：再选该<div> 内的 <code><table>（无论嵌套多深，只要存在即可）。<p>? 进阶提示：</p> <ul><li>若需兼容更复杂结构（如 <code><div> 内还有其他元素），可改用 <code>:nth-of-type(1)替代:first-child，但前提是目标<div> 类型唯一；<li>避免滥用 <code>* table:nth-child(1)等宽泛写法，极易引发意外匹配； - 现代项目中，也可考虑为首个项添加语义类名（如
<div class="item-first">），兼顾可维护性与性能。<p>总结：CSS 选择器的本质是<strong>树状路径匹配</strong>，而非线性序号筛选。要精准定位“第一个子元素”，关键在于<strong>锚定正确的父级上下文</strong>，而非依赖 <code>:nth-child()对深层后代做全局排序。
