:only-child匹配父容器中唯一子元素，不区分类型且对空白节点敏感；:only-of-type仅统计同类型元素，容错性更高。选择依据是响应“数量”还是“类型”。
只给容器里唯一子元素加样式时，:only-child最直接
它不看元素类型，只判断“是不是父容器里唯一的子节点”。比如一个 <div> 里面只有 <code><p></p>，那这个 <p></p> 就匹配 :only-child；但只要旁边多一个空格、换行、注释，甚至一个 <span></span>，它就失效——因为 DOM 里那些也是子节点。
常见错误现象：:only-child 写好了，样式死活不生效。八成是 HTML 里藏了看不见的文本节点（比如换行缩进），或者你误以为它能“忽略空白”，其实不能。
- 使用场景：卡片组件里，当内容区只有一段文字时圆角+内边距；列表项只剩一个时取消下边框
- 注意它和
:only-of-type的区别：后者只数同类型元素，前者数所有子节点 - 兼容性没问题，IE9+ 都支持，但 SSR 渲染或模板引擎自动插入空白时容易意外破坏结构
:only-child 和 :only-of-type 到底该选谁
关键看你要响应的是“数量”还是“类型”。比如父容器固定只放一个 <img alt="CSS only-child伪类使用场景_处理容器内唯一元素的样式" >，但可能有其他辅助元素（如 <div class="overlay">），这时用 <code>:only-of-type 更稳——它只检查 <img alt="CSS only-child伪类使用场景_处理容器内唯一元素的样式" > 是不是唯一的 <img alt="CSS only-child伪类使用场景_处理容器内唯一元素的样式" >，不管别的。
而 :only-child 要求整个子节点列表长度为 1，容错率极低。
立即学习“前端免费学习笔记（深入）”；
- 如果模板由后端拼接或 CMS 输出，大概率含空白文本节点 → 优先考虑
:only-of-type - 如果控制权完全在前端 JSX/TSX，且能保证无多余子节点 →
:only-child语义更准 - 参数差异：两者都不接受参数，但行为逻辑完全不同，不能互换
用 JavaScript 检查是否满足 :only-child 条件
有时候样式不够用，得靠 JS 做兜底判断。核心就是看 element.parentNode.children.length === 1 && element.parentNode.children[0] === element。
别用 childNodes，它包含文本节点；必须用 children（只返回元素节点）。
- 常见错误：用
node.childNodes.length === 1→ 即使页面看起来“只有一个”，也可能因换行返回 3 - 性能影响极小，但频繁调用建议缓存
parentNode.children引用 - React/Vue 中适合放在
useEffect或mounted里一次性判断，避免重绘时反复查
替代方案：当 :only-child 不可靠时怎么写 CSS
真遇到结构不可控，又必须区分“唯一”和“多个”，可以改用属性控制，比如加 data-single，再配 CSS 规则：[data-single] > *。虽然多一步 JS 设置，但稳定。
另一个办法是用相邻兄弟选择器做“反向排除”：* + * 匹配所有非第一个子元素，然后对目标元素设默认样式，再用 * + * 覆盖掉非唯一情况下的样式。
- 例如：先设
p { margin-bottom: 1rem; }，再写p + p { margin-bottom: 0; }，就能让多个<p></p>之间不留缝，而单个时保留底部间距 - 这种写法绕开了节点计数，对 SSR 友好，也兼容老浏览器
- 复杂点在于逻辑要倒过来想，容易漏掉边界 case，比如只有一个元素但带 class 的情况
事情说清了就结束。真正难的不是记住伪类名字，而是每次写之前，先打开 DevTools 看一眼 children 列表到底有几个东西。
