:only-of-type不生效是因为它只判断同标签名兄弟节点是否唯一，与class、id、属性、内容、状态无关；如父元素内存在多个同标签元素，则均不匹配。
为什么 :only-of-type 有时不生效？
它只看“兄弟节点中同类型标签的数量”，不是看“同名类或同属性”。比如 <div> <p>A</p> <span>B</span><p>C</p> </div>，两个 <p></p> 兄弟共存，那任一 <p></p> 都不匹配 :only-of-type——哪怕它们 class 不同、内容不同、甚至一个有 id 一个没。
- 匹配前提是：该元素在父容器内是唯一一个该 HTML 标签名的兄弟节点
-
<section><p></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></section>✅ 匹配；<section><p></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></div></section>✅ 仍匹配（<p></p>还是唯一的p） -
<section><p></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> <p></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></section>❌ 不匹配，哪怕第二个<p></p>是空的或 display: none
:only-of-type 和 :only-child 的关键区别
:only-child 要求该元素是父节点唯一子元素；:only-of-type 只要求它是该标签类型中唯一的那个。两者常被混用，但行为完全不同。
-
<ul> <li>1</li> <li>2</li> </ul>：两个<li>→ 都不匹配:only-of-type，也不匹配:only-child -
<ul> <li>1</li> <span>note</span> </ul>：<li>匹配:only-of-type（唯一li），但不匹配:only-child（还有span兄弟） -
<nav><a>Home</a></nav>：这个<a></a>同时匹配两者（既是唯一子元素，也是唯一a）
真实场景里怎么安全用 :only-of-type
它最适合处理“不确定是否单例、但样式需差异化”的结构，比如文章正文里的独立段落、卡片内唯一标题、表格中仅有一个 <caption></caption>。
- 优先用于语义明确的容器：如
<article></article>内的<header></header>，或<figure></figure>内的<figcaption></figcaption> - 避免用于动态插入内容的区域（如 js append 的
<p></p>），因为新增同类型节点会悄无声息地让样式失效 - 不要指望它替代 JS 判断：它无法感知 class 变化、data 属性或伪元素，纯靠 dom 标签结构
- 示例：给只有单个
<h2></h2>的侧边栏加底边框aside h2:only-of-type { border-bottom: 1px solid #ccc; }
兼容性与渲染陷阱
IE9+ 支持，现代浏览器无问题，但要注意：
- 它对自定义元素（如
<my-card></my-card>）也有效，只要浏览器识别该标签为合法元素（即未被当作 unknown element 处理） -
display: contents会让子元素“脱离文档流层级”，可能影响兄弟关系判断，慎用在父级 - SVG 中的
:only-of-type行为和 HTML 一致，但注意命名空间（<svg><g></g><path></path></svg>中<g></g>是唯一g，可匹配）
真正容易被忽略的是：它不关心内容、属性、状态，只数标签名。写完记得检查 DOM 结构是否真“独苗”——有时候多了一个看不见的 <script></script> 或注释节点，就不是“同类型”了，但那是另一回事。