p:only-of-type 更稳，因它只统计同类型标签数量，无视文本节点和注释；而 p:only-child 会因换行、空格或注释等非元素节点导致失效。
为什么卡片里用 p:only-of-type 比 p:only-child 更稳？
因为真实卡片 HTML 常带换行、空格或注释，比如：
<div class="card">\n <p>正文</p>\n <!-- 可能有服务端注入的注释 -->\n</div>这种结构下
p:only-child 会失效（文本节点和注释算子元素），但 p:only-of-type 只数 <p> 标签个数——只要只有一个 <p>，就命中。
aside:only-of-type 在侧边栏场景中怎么防错位？
当页面只渲染一个 <aside> 时，常需取消默认外边距或调整宽度。直接写 aside:only-of-type { margin: 0; width: 240px; } 就够了，它不关心父容器里有没有 <header> 或 <footer>，只确认“当前这个 <aside> 是父元素中唯一的 <aside>”。
- 别误以为“页面只有一个
<aside>”就等于该选择器生效——得看它在**直接父容器**内是否唯一 - Vue/React 动态插入的
<aside>可能晚于 CSS 计算时机，导致样式未应用；可加key或用 class 临时兜底 - 如果父容器是
<main>，而你同时用了<aside>和<nav>，aside:only-of-type依然有效——类型互不干扰
图片居中且仅当它是唯一 <img> 时才加边框？
文章卡片里经常只有一张封面图，这时用 article img:only-of-type 最自然：
article img:only-of-type {\n display: block;\n margin: 0 auto;\n border: 1px solid #ddd;\n border-radius: 4px;\n}注意两点：
立即学习“前端免费学习笔记（深入）”；
-
<img>是自闭合标签，:only-of-type照样适用；哪怕它前后有文本节点或<span>，也不影响判断 - 如果卡片里混了
<figure><img></figure>和独立<img>，那两个<img>都会被计入总数，:only-of-type就不匹配——这是预期行为，不是 bug
真正难的不是写对选择器，而是看清 DOM 结构
开发者工具里右键「Edit as HTML」手动删减对比最可靠。别只看 element.children.length——它不包含文本节点，但浏览器计算 :only-child 时会算；而 :only-of-type 的逻辑只依赖 element.querySelectorAll('p').length === 1 这种直观判断。动态插入、SSR 注入、JS 模板残留，都可能悄悄多塞一个同类型标签，让看似“唯一”的条件崩掉。
