:first-child 在 inline 元素上“看似不起作用”实则有效，根本原因是 HTML 空白符生成的文本节点成为父元素首个子节点，导致 inline 元素无法匹配；可通过开发者工具验证、改用 :first-of-type 或块级包装解决。
为什么 :first-child 在 inline 元素上“看似不起作用”
它其实起作用了，只是你观察的视觉效果没变——:first-child 匹配的是 DOM 树中父元素的第一个子节点，和 display 类型无关。问题常出在：你给一个 或 加了 color: red;，却发现它没变红，而同级前面明明没有其他元素。
真实原因通常是：父容器里存在空白文本节点（换行、缩进、空格）。HTML 解析时，这些空白会生成 Text 节点，成为父元素的第一个子节点，导致你的 inline 元素变成第二个子节点，自然不匹配 :first-child。
验证是否被空白文本节点干扰
打开浏览器开发者工具，选中父元素 → 切到 “Elements” 面板 → 展开看子节点。如果第一个是 #text（内容为空或只含换行符），那这就是元凶。
解决思路不是强行改选择器，而是消除干扰源或调整匹配逻辑：
立即学习“前端免费学习笔记（深入）”；
- 删掉 HTML 中父元素开始标签和第一个子元素之间的换行与空格（不现实，可读性差）
- 用
:first-of-type替代 —— 它只看元素类型，忽略文本节点 - 把 inline 元素包裹进一个块级容器（如 ），再对这个容器应用样式逻辑
用块级包装 +
:first-child稳定控制样式这是最可控、语义清晰的做法：把一组 inline 元素统一包进一个块级容器，再让该容器成为父元素的首个子元素。
此时你可以安全地写：
.nav-group:first-child a:first-child { font-weight: bold; }或者更简洁地：
.nav-group a:first-child { ... }关键点：
-
.nav-group是的第一个子元素，不再受文本节点干扰 - 所有样式逻辑集中在块级包装内，结构清晰、可复用
- 避免了
:first-of-type的潜在歧义（比如多个同类型兄弟容器）
inline 元素本身不能用
:first-child吗？能，但前提是你确认它是父元素的**第一个子节点**。例如：
文字更多
这个
确实是的:first-child，样式会生效。但只要中间加个换行：文字 更多
第一行换行就生成了
#text节点，:first-child就失效了。所以真正要警惕的不是 inline 还是 block，而是 HTML 源码中那些看不见的空白节点 —— 它们比 display 类型更容易破坏选择器预期。
-
