:nth-of-type只对同一父元素下同标签名的直接子元素计数，不认class、不跨层、不穿透嵌套；.list li:nth-of-type(2)选不到第二个li，是因为该li若被div包裹就不再是ul的直接子元素，不参与计数。
直接说结论： :nth-of-type 只对「同一父元素下、同标签名、且为直接子元素」的兄弟节点计数，它不认 class、不跨层、不穿透嵌套——想精确选中，必须先确认 HTML 结构是否满足这个前提。
为什么 .list li:nth-of-type(2) 经常选不到第二个 li
常见错误现象：写好了样式，但第二项没变色，甚至在 Safari 里完全失效。
根本原因不是浏览器兼容性问题，而是 HTML 结构破坏了 :nth-of-type 的计数基础：
- 它只统计「直接父元素下的同标签兄弟」，比如
ul下的li；如果某个li被包在div里，它就不再是ul的直接子元素，压根不参与计数 -
.list li:nth-of-type(2)实际匹配的是「.list下第 2 个li直接子元素」，不是页面上视觉顺序的“第二个li” - 注释、文本节点、其他标签（如
p）会干扰:nth-child，但对:nth-of-type没影响——它只看同类标签
:nth-of-type(n) 和 :nth-child(n) 到底该用哪个
两者逻辑完全不同，选错就白写：
-
:nth-child(n)看的是「所有子元素里的第 n 个位置」，不管类型。例如li:nth-child(2)会选中父元素下第二个子元素，前提是它恰好是li -
:nth-of-type(n)看的是「同类型子元素里的第 n 个」，跳过其他标签。例如li:nth-of-type(2)会忽略中间的div、p，只数li - 表格隔行变色必须用
tr:nth-of-type(even)，而不是tr:nth-child(even)——因为thead或tfoot里的tr会把序号带偏 - 如果父容器下只有目标标签（比如纯
li列表），两者效果一致；但只要结构稍复杂，:nth-of-type更稳定、更可预期
嵌套元素里怎么给 .entry:nth-of-type(odd) 下的 .imageContain 加样式
这是高频出错点，尤其在 CMS 或组件化结构中：
- ✅ 正确写法：
.entry:nth-of-type(odd) .imageContain—— 中间必须有空格，表示后代关系 - ❌ 错误写法：
.entry:nth-of-type(odd).imageContain—— 这是在找一个同时带两个 class 且满足:nth-of-type的单个元素（而:nth-of-type对 class 无效） - ❌ 错误写法：
.entry:nth-of-type(odd) { .imageContain { ... } }—— 原生 CSS 不支持这种嵌套语法，Firefox/Safari 全部忽略 - 如果只想影响直接子级，用
>：.entry:nth-of-type(odd) > .imageContain
公式 an+b 里 a 和 b 的实际意义容易被误解
an+b 不是编程里的数组索引，它的行为由浏览器按标准解析：
- n 从 0 开始代入，但最终匹配的是结果 ≥ 1 的正整数位置。例如
3n+1：n=0→1，n=1→4，n=2→7……所以匹配第 1、4、7… 个同类元素 -
2n等价于even，2n+1等价于odd；但2n+0不合法，必须写成2n -
-n+5这种写法会匹配前 5 个（n=0→5，n=1→4，n=2→3，n=3→2，n=4→1），常用于“仅前 N 个生效” - IE9+ 支持全部公式，但旧版 Safari 对负系数支持不稳定，生产环境建议优先用
even/odd或明确数字
最常被忽略的一点：每个父元素都独立计数。两个不同 section 下的 div.card，各自都是 :nth-of-type(1)。想要全局编号效果，CSS 做不到，得靠 JS 或重构 HTML 结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
