:only-child仅在元素是父元素唯一子节点时匹配，而非父元素仅有一个子元素；它受文本节点、注释等影响，易因空白符失效，兼容ie9+但不适用于svg或shadow dom。
只用 :only-child 判断单个子元素存在性
它不是“父元素只有一个子元素时生效”，而是“当前元素是其父元素的唯一子元素时才匹配”。很多人误以为它能兜底判断“父里有没有别的兄弟”，其实它只管自己是不是孤儿——没兄弟，就命中；有哪怕一个兄弟（哪怕被 display: none 了），就不匹配。
常见错误现象：div > p:only-child 写了却没生效，结果发现父 div 里还藏了个空文本节点、注释或换行符。HTML 解析器会把所有空白字符（包括回车缩进）当作 Text 节点，它们也是子元素。
- 使用场景：给卡片容器里唯一一段文字加特殊间距，或让图标按钮在独占时居中
- 兼容性没问题，IE9+ 都支持，但别指望它在 SVG 或 Shadow DOM 里行为一致
- 若需排除空白节点干扰，得先清理 DOM（比如服务端渲染时压缩 HTML），或改用 JS 判断
parent.children.length === 1
:only-child 和 :first-child:last-child 的实际差异
表面上看，p:only-child 和 p:first-child:last-child 效果一样，但底层逻辑不同：前者依赖节点树结构，后者靠位置序号计算。当父元素里混有其他类型元素（比如 span、div）时，:first-child:last-child 仍可能命中（只要那个 p 碰巧是第一个也是最后一个子元素），而 :only-child 严格要求父下只有它一个子节点。
- 参数差异：无参数，纯伪类，不能传参也不能组合伪元素（如
:only-child::before合法，但:only-child:hover是无效写法） - 性能影响极小，浏览器对这类结构伪类优化得很好，但别嵌套太深，比如
article section div p:only-child就容易拖慢重排 - 如果目标是“仅当父元素内只有这一个
p且无其他任何节点”，必须用:only-child；如果只是想“让第一个p在没有后续p时样式不同”，用:first-of-type:last-of-type更稳妥
Vue/React 中动态渲染导致 :only-child 失效的典型原因
框架组件里常出现“本该只有一个子，但样式没应用”的情况。根本原因是：JSX 或模板编译后插入了额外节点。比如 Vue 的 v-if 分支残留注释、React 的 Fragment（）不生成真实 DOM 节点但会影响子节点计数、或者开发时多写了一个空格或换行。
立即学习“前端免费学习笔记（深入）”；
- 检查方法：打开 DevTools，右键父元素 → “Edit as HTML”，看里面是否有多余的
#text节点 - 修复建议：用
React.Fragment替代空标签，Vue 模板避免在父子标签间换行，或干脆放弃:only-child改用 class 控制（如绑定class="{ 'single': children.length === 1 }"） - 注意 SSR 渲染时，服务端生成的 HTML 若含空格，客户端 hydrate 后也可能触发不一致
替代方案：什么时候该果断不用 :only-child
它语义单一、容错率低，一旦 DOM 结构稍有变化就断掉。如果你要实现的是“当内容区只有一块主区域时隐藏边框”或“单图时撑满容器”，不如直接用 JS 判断子节点数量并加 class，更可控。
- 复杂点在于：CSS 无法读取
children.length，但现代框架都提供 ref 或生命周期钩子去监听子节点变化 - 容易被忽略的地方：伪类不触发重绘（re-paint），但节点增删会触发重排（reflow）。用 class 方案反而更容易做 CSS 过渡动画
- 如果非要用纯 CSS，
:nth-child(1):nth-last-child(1)行为和:only-child一致，但可读性更差，没必要替换
