:nth-of-type(n) 选中同标签类型下第n个元素，忽略非匹配标签、文本节点和注释；它按HTML标签名计数，不区分class/id/可见性，与:nth-child先定位再校验类型不同。
nth-of-type(n) 选中的是同标签类型下的第 n 个，不是父元素下所有子元素的第 n 个
很多人误以为 常见错误现象： 当你要表达“第 3 个子元素，且它恰好是 示例对比： 立即学习“前端免费学习笔记（深入）”； 所有现代浏览器（Chrome/Firefox/Safari/Edge）都支持 容易被忽略的地方：伪类选择器的优先级和普通类选择器一样，如果同时存在 :nth-of-type(2) 会选中父容器里“第二个子元素”，实际它只看**标签名是否匹配**。比如父元素内有 、，那么第二个 才是 p:nth-of-type(2)，中间的 div:nth-of-type(1) 没生效，其实是前面还有别的
display: none 的兄弟元素，它仍会被计入 —— :nth-of-type 不管可见性想选中“父元素下第 n 个子元素中类型为 X 的那个”，用 :nth-child 而不是 :nth-of-type
”，就得用 li:nth-child(3)。它先定位位置，再校验类型；而 :nth-of-type 是先筛选同类元素，再按顺序取第 n 个。
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 及更早版本完全不支持
:nth-of-type，包括移动端。唯一要小心的是仍在维护的旧企业系统 —— 如果必须兼容 IE8，得用 JS 动态加 class，或改用 :first-child + 相邻兄弟选择器模拟简单情况。.item:nth-of-type(1) 和 .item.active，后者会覆盖前者样式 —— 别指望 :nth-of-type 自带更高权重。
