.list li:nth-of-type(2) 选不到第二个 li 是因为 :nth-of-type() 仅在直接父元素下的同标签兄弟元素中计数，若 li 被 div 等容器嵌套，则不属同级，不参与计数；例如 <ul class="list"><li>1</li><div><li>2</li></div><li>3</li></ul> 中，只有第1和第3个 li 是 ul 的直接子元素，故 :nth-of-type(2) 匹配的是“第三项”，而非“第二项”。
为什么 .list li:nth-of-type(2) 有时选不到第二个 li
因为 :nth-of-type() 只在**同级、同标签名**的兄弟元素中计数，不看 class、id 或嵌套层级。如果 li 不是直接同级（比如被 div、section 或其他容器包裹），它们就不是“同级兄弟”，根本不会进入 li:nth-of-type 的计数范围。
常见错误现象：.list li:nth-of-type(2) 在 Chrome 看似生效，但在 Safari 中失效——往往是因为 HTML 实际结构是：
<ul class="list"> <li>第一项</li> <div><li>第二项</li></div> <li>第三项</li> </ul>
此时，<li>第二项</li> 的父级是 div，不是 ul；它和另外两个 li 不构成同级关系，所以 .list li:nth-of-type(2) 实际只匹配 ul 下的第 2 个直接子 li（即“第三项”）。
-
:nth-of-type永远只作用于「直接父元素下的同标签兄弟」，不跨层 - 嵌套的
li属于其最近父容器（如div）的子元素，和外层ul的li无关 - 若需控制嵌套项，必须写对作用域：例如
div li:nth-of-type(1)，而非试图从顶层穿透
如何给嵌套在不同容器里的同类元素统一编号
不能靠单个 :nth-of-type 实现跨容器编号。浏览器没有“全局类型序号”概念，每个父元素独立计数。
立即学习“前端免费学习笔记（深入）”；
比如你有两组 div.card，分别在 #section-a 和 #section-b 下，想让所有 card 按 1→2→3→4 编号并隔行变色——div.card:nth-of-type(odd) 不会生效，因为它是按每个父容器单独算的：两个 section 各自的第 1 个 div.card 都是 :nth-of-type(1)。
- 真正生效的是
div.card:nth-of-type(1)→ 匹配每个父容器下第一个div（不管是不是card） -
.card类本身不参与类型识别，div.card:nth-of-type(2)和div:nth-of-type(2)行为完全一致 - 要达成“全局序号”效果，必须用 JS 动态加 class，或改用语义更明确的结构（如全部平铺为
section > div.card，再用section div.card:nth-of-type(odd)）
:nth-of-type(n) 和 :nth-child(n) 在非同级结构里谁更可靠
两者在非同级结构里都不可靠——但失效原因不同，容易误判。
:nth-child(n) 失效是因为它依赖绝对位置：如果目标元素前面插了非目标标签（如 <p> 或注释），序号就偏移；:nth-of-type(n) 失效则是因为它根本找不到“同类型兄弟”。
- 当你要选「父容器下第 3 个
p」且中间夹着div、h2——用p:nth-of-type(3)正确 - 当你要选「父容器下第 3 个子元素，且它必须是
p」——用p:nth-child(3)正确 - 但若
p被包在article里，而你写article p:nth-of-type(2)，那实际选的是article下第二个p，和外部结构无关
后代选择器里空格不能省——.entry:nth-of-type(odd).imageContain 是错的
这个写法会让所有浏览器忽略整条规则，因为它被解析为「一个同时拥有 .entry、:nth-of-type(odd)（仅对标签有效）、.imageContain 三个条件的单个元素」，而 .imageContain 是子元素，不可能和 .entry 共存于同一个标签上。
正确写法必须带空格，表示后代关系：
.entry:nth-of-type(odd) .imageContain { background-color: #ff6b6b; }
- 空格是后代选择器（descendant combinator）的语法要求，不是可选格式
- 缺少空格 = 类名拼接 = 语义错误 = 规则被丢弃
- 即使使用现代 CSS Nesting（
@nest），也需显式声明，原生 CSS 中无例外
an+b 怎么算，而是没意识到 :nth-of-type 的作用域永远锁死在「直接父元素 + 同标签兄弟」这一个狭窄范围里。只要 DOM 结构稍有嵌套或混杂，就必须重新确认作用域边界——而不是调大 n 或换关键字。 
