:only-child仅匹配父元素的唯一子节点（含文本、注释等所有节点），非仅唯一标签；DOM中存在换行、空格或注释即失效，验证需用parentNode.childNodes.length === 1。
:only-child 能选中父元素下唯一的子元素，但前提是——它真的是「唯一子节点」，不是「唯一标签」。很多人写了没效果，不是选择器写错，而是 DOM 结构早被空格、换行或注释悄悄破坏了。
为什么 :only-child 经常不生效
浏览器把所有直接子节点都算进去：<p>、文本节点（哪怕只是回车）、<!-- comment -->、<script>，全算。只要 parentNode.childNodes.length !== 1，:only-child 就失效。
- 常见错误现象：
div p:only-child没反应 → 实际父div里有换行，生成一个#text节点 - Vue/React 模板编译后常插入注释节点，比如
<!--v-if-->，也会让子节点数 > 1 -
display: none的兄弟元素照样参与计算，:only-child不看可见性 - 服务端渲染（SSR）或 CMS 输出的 HTML 很难保证“无空白”，结构越动态，越不可靠
:only-child 和 :only-of-type 到底该用哪个
语义完全不同，选错就白调样式：
-
p:only-child：要求父元素下总共只有这一个子节点，且必须是<p>—— 容不得任何其他节点 -
p:only-of-type：只要求父元素下没有别的<p>，允许存在<div>、文本、注释等 - 真实场景中，90% 的需求其实是「同类型唯一」，比如「列表只有一项时加圆角」，该用
li:only-of-type，而不是li:only-child - 兼容性一致（IE9+），但旧版 Safari 对空白更敏感，
:only-of-type更稳
怎么验证父元素是否真满足 :only-child 条件
别靠眼睛数标签，用控制台快速确认：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 选中目标元素，在 DevTools 控制台执行：
document.querySelector('your-selector').parentNode.childNodes.length—— 必须等于1 - 对比
.children.length（只计元素节点）和.childNodes.length（计所有节点），若后者更大，说明有隐藏干扰 - 临时加调试样式：
* { outline: 1px solid red !important; }，看有没有框住看不见的空白区域 - HTML 压缩后（如
<div><p>x</p></div>连写）能规避换行问题，但不适合模板类项目
安全替代方案：当结构不可控时怎么办
纯 CSS 难兜底时，就得换思路：
- 优先改用
:only-of-type，尤其在 CMS、富文本、用户生成内容场景 - 给父容器加 class 控制，比如后端或 JS 判断
children.length === 1后加class="single"，再写.single > * - 用
:has(> *:only-child)做容器级响应（注意：Chrome 105+、Safari 15.4+ 支持，Firefox 尚未全量） - 避免在关键布局逻辑中强依赖
:only-child，比如卡片居中、边框开关——这些地方一旦 DOM 变动，样式就断，很难 debug
最常被忽略的一点：伪类匹配的是 DOM 节点树，不是 HTML 字符串。你写的源码看着干净，运行时可能早已被框架、构建工具或 SSR 注入了看不见的节点。验证永远从 childNodes 开始，不是从 innerHTML。
