本文详解 CSS 中准确选取“首个子元素内特定后代元素”的方法，纠正 :nth-child(1) 在嵌套结构中误选的常见误区，并提供语义清晰、兼容性良好的解决方案。
本文详解 css 中准确选取“首个子元素内特定后代元素”的方法，纠正 :nth-child(1) 在嵌套结构中误选的常见误区，并提供语义清晰、兼容性良好的解决方案。
在实际开发中，我们常需对嵌套结构中的“第一个逻辑单元”应用样式，例如仅高亮第一个 <div> 内的 <code><table>。但若直接使用 <code>.item table:nth-child(1)，结果往往不符合预期——所有 <table> 都被选中。原因在于：<code>:nth-child(n) 是基于元素在其直接父级中的兄弟位置进行匹配的，而非在整个 .item 容器中按文档顺序全局计数。
观察原始 HTML 结构：
<div class="item"> <div><table>1</table></div> <div><table>2</table></div> <div><table>3</table></div> </div>
每个 <table> 的父元素都是独立的 <code><div>，而每个 <code><div> 中 <code><table> 恰好是其<strong>唯一子元素</strong>，即所有 <code><table> 都满足 <code>:nth-child(1)（在各自 <div> 中排第 1）。因此该选择器会命中全部三个 <code><table>，而非仅内容为 <code>"1" 的那个。
✅ 正确做法是分层定位：先精确选取 .item 下的第一个 <div>（即首个逻辑子项），再通过后代或子选择器定位其中的 <code><table>。推荐写法如下：<pre class="brush:php;toolbar:false;">.item > div:first-child table {
/* 仅作用于第一个 <div> 内的所有 <table>（此处仅一个） */
background-color: #e6f7ff;
font-weight: bold;
}<p>这里：</p>
<ul><li>
<code>.item > div:first-child</code> 使用子选择器 <code>></code> 和伪类 <code>:first-child</code>，确保只匹配 <code>.item</code> 的<strong>直接子元素中第一个 <code><div>；<li>后续空格 + <code>table</code> 表示后代选择器，可匹配该 <code><div> 内任意层级的 <code><table>（如 <code><div><section><table>...</table></section></div></code> 也适用）； <li>若 <code><table> 始终为 <code><div> 的直接子元素，也可用更严格的 <code>.item > div:first-child > table</code> 提升可读性与性能。<p>⚠️ 注意事项：</p>
<ul>
<li>避免误用 <code>:nth-of-type(1)</code>：它按元素类型（如 <code>div</code>、<code>span</code>）在兄弟中排序，若 <code>.item</code> 下混有其他元素（如 <code><span></span></code>），可能仍不精准；</li>
<li>
<code>:first-child</code> 要求目标元素必须是其父元素的第一个子节点，若首个子元素不是 <code><div>（如注释、文本节点或 <code><p></p></code>），则匹配失败——此时可改用 <code>:nth-child(1 of div)</code>（现代浏览器支持）或 JavaScript 辅助；<li>该方案兼容所有主流浏览器（包括 IE9+），无需额外 polyfill。</li>
<p>总结：CSS 选择器的层级关系决定匹配逻辑。要实现“首个容器内的目标元素”，应优先使用 <code>> :first-child</code> 组合定位容器，再向下选取内容，而非依赖 <code>:nth-child()</code> 对深层后代做全局序号判断。结构越清晰，选择器越可靠。</p>
</div></code>
</li>
</ul>
</div></code>
</table></code>
</li>
</table></code>
</div></code>
</li>
</div></code></strong>
</li></ul>
</table>
</div></pre>
</table>
