:nth-of-type只按标签名计数，无视class、id等属性；如p:nth-of-type(2)选中父容器下第二个<p>，而非第二个.item元素。
nth-of-type只认标签名，不认class或样式
很多人以为 .item:nth-of-type(2) 能选中第二个带 item 类的元素，结果发现完全没生效——因为 :nth-of-type() 根本不管 class、id 或属性，它只看父容器下「同种 HTML 标签名」的顺序。
比如父元素里是 <div><p class="item">A</p><span class="item">B</span><p class="item">C</p></div>，那么 p:nth-of-type(2) 实际选中的是第三个 <p>（如果存在），而不是第二个 .item。这里只有两个 <p>，所以 p:nth-of-type(2) 会选中 C，而 B（<span>）永远进不了 p:nth-of-type 的计算范围。
- ✅ 正确用法：
p:nth-of-type(1)→ 第一个<p>元素 - ❌ 常见误用：
.card:nth-of-type(2)→ 无效，CSS 选择器里 class 不参与类型计数 - ⚠️ 混合标签时，
div:nth-of-type(2)和span:nth-of-type(2)各自独立计数，互不影响
当父容器里有 <h2>、<p>、<div> 杂糅时，怎么精准选第 N 个 <p>
这是最典型的使用场景：文章正文里标题、段落、引用块交错，你想给「第 3 个段落」加底色，但不能影响其他标签。
直接写 p:nth-of-type(3) 就行，前提是确认目标确实是该父容器下第 3 个 <p>。注意它和 :nth-child() 的关键区别：:nth-child(3) 要求第 3 个子元素**恰好是 <p>**；而 :nth-of-type(3) 是跳过非 <p> 元素，只对 <p> 编号。
立即学习“前端免费学习笔记（深入）”；
- 父元素结构：
<h2>标题</h2><p>第一段</p><div>附注</div><p>第二段</p><p>第三段</p> -
p:nth-of-type(3)→ 匹配「第三段」✅（它是第 3 个<p>） -
p:nth-child(3)→ 不匹配任何内容 ❌（第 3 个子元素是<div>） - 性能无差异，但语义更明确：你要的是「第 N 个某类标签」，不是「位置在 N 的某个标签」
为什么用了 nth-of-type 还是没生效？检查这三点
常见失效不是语法错，而是被其他规则覆盖，或 DOM 结构理解偏差。
- ? 看 computed styles：浏览器开发者工具里查目标元素是否真的命中了这条规则（有时被更高优先级的
!important或更具体的选择器压住） - ? 数错“type”：比如把
<section>和<article>当作同类，其实它们是不同 type，各自计数 - ? 忘记伪元素干扰：
<p>里面如果有<img>、<iframe>等，不影响p:nth-of-type计算，但若父容器开头有<!-- 注释 -->或<script>，它们不算“元素”，也不参与计数 —— 所以放心，注释不会打乱序号
替代方案：想按 class 或数据属性筛选第 N 个，只能靠 JS 或预处理器
CSS 原生没有 .item:nth-of-class(2) 这种东西。如果你必须基于 class、data-* 属性或内容逻辑来选「第 N 个符合条件的元素」，CSS 无解。
这时候得切到 JS：document.querySelectorAll('.item')[1]（取第 2 个）然后加 class 或 style；或者用 CSS-in-JS 库动态生成带索引的 class 名（如 item--1、item--2）。
- ❌ 不要试图用
[class~="item"]:nth-of-type(2)—— 属性选择器 +:nth-of-type仍是按标签名计数，class 只是附加过滤条件，不改变序号逻辑 - ✅ 如果项目用 PostCSS，可考虑
postcss-nth-child插件生成对应 class，但本质是预编译出静态规则，不是运行时筛选 - ⚠️ 注意：JS 动态加样式可能触发重排，高频操作（如滚动中）需节流或用
requestAnimationFrame
真正难的从来不是写对 nth-of-type，而是意识到它只解决「同标签内排序」这一件事——一旦需求跨出这个边界，就得换工具，别硬套。
