:only-child常“看似该生效却无效”是因为它严格要求父元素childNodes.length必须等于1，而HTML换行、空格、注释等均生成文本节点导致计数≥2；验证需运行document.querySelector('p:only-child').parentNode.childNodes.length，非1则失效。
为什么 :only-child 常常“看起来该生效却没效果”
它不看页面上“视觉上是否只剩一个”，而是严格检查 parentNode.childNodes.length === 1。哪怕父元素里只有 <p>内容</p>，但 HTML 源码中换行或空格也会生成文本节点——这时 childNodes 长度就 ≥2，:only-child 直接失效。
验证方法很简单：选中目标元素，在控制台运行 document.querySelector('p:only-child').parentNode.childNodes.length。结果不是 1，就别指望样式能挂上去。
div > p:only-child 能让单个段落撑满父容器吗？
可以，但必须满足两个前提：父元素是块级、且该 p 确实是唯一子元素（不含文本节点）。常见写法如下：
div > p:only-child { width: 100%; max-width: none; }
立即学习“前端免费学习笔记（深入）”；
注意：width: 100% 对默认 display: block 的 p 本就生效，真正起作用的是配合其他声明，比如：
-
margin: 0 auto+max-width: 600px→ 单个时居中且不限宽，多个时约束宽度 -
flex: 1→ 若父元素是display: flex，需额外加min-width: 0防止溢出 - 不要依赖
width: 100%修复浮动或 inline 元素 —— 它们本身就不占满父宽
更稳妥的替代方案：用 :only-of-type 或 JS 判断
多数所谓“只有一个子元素”的需求，其实容忍其他类型节点（如 <div>、注释、空白），这时 :only-of-type 更靠谱：
article > p:only-of-type { width: 100%; } —— 只要没有别的 <p>，哪怕有 <div> 或换行，也生效。
如果结构完全不可控（CMS 输出、用户富文本），建议放弃纯 CSS 方案：
- 后端渲染时加 class：
<div class="content single">...</div>，再写.single > * - 前端用
MutationObserver监听子节点数量变化，动态加data-single - 现代浏览器可用
:has(> *:only-of-type)做容器级判断，但 Safari 尚未支持
容易被忽略的宽度继承陷阱
:only-child 本身不改变盒模型，它只是触发样式规则。所以要注意：
- 父元素若设了
padding或border，width: 100%会包含在内（box-sizing 默认是content-box） -
inline或inline-block子元素不会响应width，得先改display - Flex/Grid 容器中，子项宽度由布局上下文决定，
:only-child规则可能被flex-basis或grid-column覆盖
真要兜底，别信“看起来只有一个”，去查 childNodes 数量 —— 文本节点不渲染，但会实实在在拦住你的样式。
