:only-child生效需父元素有且仅有一个直接子元素且类型匹配；常见失效因文本节点、注释或空格导致子节点数≠1；区别于:first-child（仅首）、:last-child（仅末）、:only-of-type（同类型唯一）。
only-child 选不到元素？检查父容器里是不是真只有一个子节点
很多人写 :only-child 没效果，第一反应是“浏览器不支持”，其实八成是 HTML 结构没满足前提：父元素下**必须且只能有一个子元素**，且该子元素类型要匹配选择器。
常见错误现象：div > p:only-child 写了但没生效——可能父 div 里混着文本节点、注释、空格换行，或者有其他标签（比如 span 或 br）。
- HTML 中的空白符（换行、缩进、空格）会被解析为
Text节点，哪怕看不见，也会让:only-child失效 -
:only-child不关心子元素是否是“唯一可见内容”，只认 DOM 树上的直接子节点数量 - 如果父元素只有 1 个
p，但还有 1 个注释<!-- tip -->，那p就不是:only-child
和 :first-child :last-child :only-of-type 的关键区别在哪
这几个伪类名字像，行为差很远。想精准控制“孤立项”，得知道它们各自数什么、比什么。
-
:only-child：父元素下所有直接子节点中，它排第 1 且第 1 个——总数必须为 1 -
:first-child：只要它是第一个子节点，不管后面还有没有别的；:last-child同理 -
:only-of-type：在同类型（比如同为p）的兄弟中，它是唯一一个——允许父元素有h2、div等其他标签
举个例子：父元素内是 <p>A</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1208" title="Logomaster.ai"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680120446209.jpg" alt="Logomaster.ai" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1208" title="Logomaster.ai">Logomaster.ai</a>
<p>Logo在线生成工具</p>
</div>
<a href="/ai/1208" title="Logomaster.ai" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<span>B</span>，那么 p 是 :first-child，但不是 :only-child，也不是 :only-of-type（因为没别的 p，所以它其实是 :only-of-type）。
实际布局中怎么安全用 :only-child 做“单例适配”
典型场景是卡片、列表项、表单区域——当内容只有一项时，去掉边框、间距或加居中样式。但不能靠猜结构，得留后手。
- 优先考虑用
:only-of-type替代，它对 HTML 更宽容，尤其适合 CMS 输出不可控的场景 - 如果必须用
:only-child，建议配合 class 控制，比如给父容器加class="single-item"，再写.single-item > *:only-child，避免误命中深层嵌套 - 注意 CSS 优先级：如果同时写了
p:only-child和p.special，后者权重更高，可能覆盖前者样式 - 不要指望它在 IE8 及更早版本工作——
:only-child从 IE9 开始支持
调试时怎么看 DOM 是否满足 :only-child 条件
别靠肉眼数标签。打开浏览器开发者工具，选中目标元素，在 Elements 面板里看它的父节点展开后有几个直接子节点（包括 #text 和 #comment）。
快速验证方法：在 Console 里运行这行代码（把 target 换成你选中的元素）：
target.parentElement.children.length === 1 && target.parentElement.firstElementChild === target
返回 true 才算真正满足 :only-child 条件。如果 children.length 是 0 或大于 1，说明中间夹了不可见节点，或者结构本身就不符合。
真正麻烦的是那些由 JS 动态插入、带空格或注释的模板片段——这种时候，:only-child 很容易失效，而你根本看不到原因。
