:nth-of-type(n) 选中同标签类型下第n个元素，忽略非匹配标签、文本节点和注释；它按HTML标签名计数，不区分class/id/可见性，与:nth-child先定位再校验类型不同。
nth-of-type(n) 选中的是同标签类型下的第 n 个，不是父元素下所有子元素的第 n 个
很多人误以为 :nth-of-type(2) 会选中父容器里“第二个子元素”，实际它只看**标签名是否匹配**。比如父元素内有
、
、
，那么第二个
才是 p:nth-of-type(2)，中间的
完全被跳过。
常见错误现象：div:nth-of-type(1) 没生效，其实是前面还有别的
（比如注释、隐藏元素、服务端注入的空
），或者父元素第一个子元素根本不是
。
- 只按 HTML 标签名计数，不区分 class、id 或属性
- 忽略文本节点、注释节点（它们不影响计数）
- 如果目标元素前有同类型但被
display: none 的兄弟元素，它仍会被计入 —— :nth-of-type 不管可见性
想选中“父元素下第 n 个子元素中类型为 X 的那个”，用 :nth-child 而不是 :nth-of-type
当你要表达“第 3 个子元素，且它恰好是
”，就得用 li:nth-child(3)。它先定位位置，再校验类型；而 :nth-of-type 是先筛选同类元素，再按顺序取第 n 个。
示例对比：
立即学习“前端免费学习笔记（深入）”；
- A
B
- C
- D
li:nth-of-type(2) → 选中 C（第二个
）
li:nth-child(2) → 不匹配（第二个子元素是
li:nth-child(3) → 选中 C（第三个子元素，且是
）
nth-of-type 支持公式语法，但括号里不能写变量或 CSS 自定义属性
:nth-of-type(2n)、:nth-of-type(3n+1) 都合法，但不能写成 :nth-of-type(var(--n)) 或 :nth-of-type(calc(2 * 3)) —— 这些在 CSS 中无效，浏览器直接忽略整条规则。
- 公式中的
n 是从 0 开始代入的整数：0, 1, 2, 3…
-
2n+1 等价于 odd，2n 等价于 even
- 负数如
-n+3 表示前 3 个（n=0→3, n=1→2, n=2→1），但要注意：没有第 0 个元素，所以实际生效的是第 1/2/3 个
兼容性没问题，但 IE8 及更早版本完全不支持
所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持 :nth-of-type，包括移动端。唯一要小心的是仍在维护的旧企业系统 —— 如果必须兼容 IE8，得用 JS 动态加 class，或改用 :first-child + 相邻兄弟选择器模拟简单情况。
容易被忽略的地方：伪类选择器的优先级和普通类选择器一样，如果同时存在 .item:nth-of-type(1) 和 .item.active，后者会覆盖前者样式 —— 别指望 :nth-of-type 自带更高权重。
