:only-child 失效主因是父元素含文本/注释节点致子节点数≠1；:only-of-type 仅统计同标签兄弟，免疫空白节点。拼写错误如:only-of-child会被浏览器静默忽略。
为什么 :only-child 经常“不生效”，而 :only-of-type 却稳得多
根本原因在于两者判断依据完全不同：:only-child 数的是父元素下**所有子节点总数**（包括文本、注释、空格），只要不是恰好 1 个，就直接失效；:only-of-type 只数同标签的兄弟元素数量，对空白和异类节点完全免疫。
常见错误现象：p:only-child 写好了，DevTools 里样式灰掉、没反应。展开父元素一看，大概率是前后各一个 #text 节点——比如 HTML 写成 <div>\n <p>ok</p>\n</div>，子节点数其实是 3（换行+
+换行）。
-
:only-child等价于 JavaScript 中el.parentNode.children.length === 1 -
:only-of-type等价于Array.from(el.parentNode.children).filter(n => n.tagName === el.tagName).length === 1 - 模板引擎（Vue SFC、PHP 渲染）、CMS 输出、Markdown 解析器几乎必然插入空白或注释 →
:only-child极易意外挂掉
拼错名字会导致规则静默失效，且 DevTools 不报错
:only-of-child、:only-child-of-type 这类写法根本不存在，浏览器直接忽略整条 CSS 规则，连 warning 都不抛。你在 DevTools 的 Styles 面板里看到那条规则被划掉（灰掉），第一反应该检查伪类名是否拼对。
- ✅ 正确写法：
li:only-child、img:only-of-type - ❌ 错误写法：
li:only-of-child、button:only-child-of-type、p:only-of-type-child - 命名逻辑：后缀固定是
-of-type或-child，中间不能混搭，“of”只属于-of-type
什么时候必须用 :only-child，什么时候该换 :only-of-type
选哪个不看“哪个更高级”，而看你要约束的意图是否包含“排他性结构”。
立即学习“前端免费学习笔记（深入）”；
- 要用
:only-child的场景：需要确保该元素是父容器里**唯一可见内容单元**，比如卡片中仅含一张图时移除内边距、列表项内无嵌套结构时加粗文字 —— 这种强语义依赖 DOM 结构干净 - 该用
:only-of-type的场景：父容器结构不可控，但你想对某类元素做“单例样式”，比如文章正文里唯一的<figure>居中、表单中唯一一个<textarea>自动撑高、侧边栏里仅有一个<nav>时加装饰线 - 动态渲染（React/Vue）、第三方组件注入、服务端渲染（SSR）输出 HTML → 默认优先选
:only-of-type
空格和选择器作用域容易引发样式污染
写 aside :only-of-type（注意空格）这种宽泛选择器，会匹配所有在 <aside> 后代中“类型唯一”的元素，比如 <p>、<nav>、<footer> 全都可能命中，极易样式冲突。
- 推荐写法：
aside > p:only-of-type（仅直接子元素）、article > figure:only-of-type - 避免写法：
section :only-of-type、div :only-child（太宽，缺乏上下文约束） - 如果父元素本身有 class 控制范围，比如
.card，就用.card > img:only-of-type，别省略>
#text 节点和模板自动注入的空白，正在悄悄让 :only-child 失效。你得习惯打开 DevTools 的 Elements 面板，手动展开父节点看子节点构成，而不是只盯着标签。 
