:only-child仅在元素是父容器唯一且直接的子节点（不含任何文本、注释等其他节点）时生效；例如<div><p>hello</p></div>中p匹配，但<div>\n<p>hello</p>\n</div>因换行生成文本节点而失效。
什么时候 :only-child 才会生效？
它只在元素是父容器中**唯一且直接的子元素**时匹配，不是“只有一个同类元素”，而是“整个父元素下仅有一个子节点，且就是它自己”。比如 <div><p>hello</p></div> 中的 <p> 会匹配；但只要旁边多一个文本节点（哪怕只是空格）、<span> 或注释，就立刻失效。
- HTML 中换行缩进产生的空白文本节点也算子节点 →
:only-child不触发 - 父元素内有其他标签、注释
<!-- test -->、或 JS 动态插入的节点 → 失效 - 它不关心兄弟元素是否同类型，只看“是不是唯一的 direct child”
:only-child 和 :only-of-type 容易混淆的点
很多人想“给唯一一个 <h2> 加样式”，却误用 :only-child。这时应该用 :only-of-type：它允许父元素有其他类型子元素（如 <div><h2>标题</h2><p>正文</p></div>），只要该类型仅出现一次就匹配。
-
:only-child：父元素总共只有 1 个子节点，且是目标元素 -
:only-of-type：父元素中该 HTML 标签名只出现 1 次（不管还有多少别的标签） - 浏览器兼容性一致（IE9+），但语义和触发条件完全不同
实际美化场景与避坑写法
真正适合 :only-child 的场景其实很窄：比如卡片容器预期只放一个内容块，想给它加满宽边框或去外边距；或表单里单个 <input> 时圆角全开。
- 别依赖它做“列表只剩一项时隐藏分割线”——用
:first-child:last-child更稳 - 服务端渲染或 SSR 页面中，注意模板是否引入了不可见字符（如 BOM、尾随空格）
- 调试时用浏览器开发者工具检查父元素的
childNodes.length，比肉眼数标签更可靠 - 示例：让独占的
<aside>占满宽度并加阴影：aside:only-child { width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
为什么有时写了没反应？检查这三处
多数失效不是选择器写错，而是 DOM 结构没达到它的严苛前提。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → 右键父元素 → “Edit as HTML”，看是否有隐藏的文本节点（表现为换行或空格）
- 检查是否用了自闭合标签但忘了斜杠（如
<img>在非 XHTML 模式下仍是合法子节点，但可能被误判） - Vue/React 组件中，
v-if或{children}可能渲染出注释节点（如开发模式下的 React Fragment 注释）→ 此时:only-child不成立
真实项目里，:only-child 很少单独扛大梁，更多是作为结构校验的辅助手段。它脆弱，但一旦生效，说明 DOM 确实干净——这种确定性，恰恰是某些原子组件需要的。
