p:only-of-type仅当父容器中同类型标签唯一时生效；它无视注释、文本节点及其他类型元素，但若存在多个同类型标签（如两个<p>），即使被其他元素隔开也不匹配。
:only-of-type 不是“选中页面里唯一的某个标签”，而是“选中父元素中同类型子元素里唯一存在的那个”。它只看父级直接子元素的类型分布，不关心全局或嵌套层级。
为什么 p:only-of-type 有时不生效？
常见错误是误以为只要页面只有一个 <p> 就能匹配。实际它只检查该 <p> 所在的**直接父容器**内是否还有其他 <p> 兄弟节点：
- 如果父容器里有
<p>、<div>、<span>各一个 →p:only-of-type匹配成功 - 如果父容器里有两个
<p>→ 即使其他所有容器里都没<p>，也不匹配 - 如果父容器里有
<p>和注释节点<!-- -->或空文本节点 → 不影响匹配（它们不是元素，不参与“type”计数）
Vue/React 中用 :only-of-type 的坑
框架常在组件渲染时自动插入非标签节点，导致看似“唯一”的元素实际不满足条件：
- Vue 的
v-if插入的<!--v-if-->注释节点，不会被:only-of-type计为同类，但会打破“唯一子元素”结构 - React 的 Fragment（
<></>）或插槽内容外层包裹的匿名 div，可能让目标元素失去“直接子元素”身份 - 建议在开发工具中右键「检查元素」，确认目标元素的父节点下是否真只有它一个同类型标签（忽略注释和文本节点）
:only-of-type 和 :only-child 的关键区别
二者行为差异直接影响样式是否命中：
立即学习“前端免费学习笔记（深入）”；
-
p:only-child：要求父元素**只有一个子节点，且必须是<p>** —— 如果父元素里还有<span>，哪怕只有一个<p>，也不匹配 -
p:only-of-type：只要父元素里**只有一个<p>，其他可以是任意类型标签** —— 更宽松，也更常用 - 典型误用：想给“父容器中仅含一个段落”加样式，却写了
.wrapper > p:only-child，结果因存在<div>或<hr>失效
真正容易被忽略的是：浏览器对“类型”的判定严格基于 HTML 标签名（p、div、custom-element），自定义元素需确保大小写与注册名完全一致，否则 :only-of-type 视为不同类型。
