:nth-child(n)按所有子节点顺序计数，:nth-of-type(n)只按同标签元素计数；前者易受空白文本节点干扰，后者更稳定可靠。
想精准选中第几个 p 或第几个 li，却总被样式“跳过”或“错位”？问题大概率出在没分清 :nth-child 和 :nth-of-type 的计数逻辑——它们根本不是同一种“第几个”。
选第 2 个 li 却没生效？先看父元素下第 2 个子节点是不是 li
:nth-child(n) 只认“座位号”，不认“坐的是谁”。它先按顺序数所有子节点（包括文本、注释、div、span），再检查那个位置上的元素是否匹配选择器。
- HTML 中若开头有换行缩进产生的空白文本节点，或插了
<!-- 注释 -->，li:nth-child(2)就可能指向一个div，结果完全不生效 - 常见结构如
<ul><li>1</li><li>2</li></ul>看似干净，但只要编辑器自动加了换行，DOM 里就多了文本节点，序号就偏了 - 想强制让它工作？要么删掉所有干扰节点（不现实），要么改用
:nth-of-type
想选“第 2 个 p”，不管前面有多少杂七杂八的标签？用 :nth-of-type
:nth-of-type(n) 只统计同标签类型的兄弟元素。它跳过 h3、div、文本、注释，只给所有 p 编号：第一个 p 是 1，第二个是 2……
-
p:nth-of-type(2)在<div><h3>标题</h3><p>第一段</p><span>说明</span><p>第二段</p></div>中稳稳命中第二个p - 它对真实项目更友好：新闻列表常混排
h2、img、p；表单字段组常穿插label、div、input—— 这些都不影响input:nth-of-type(3)找到第三个输入框 - 注意：
:nth-of-type不识别 class 或属性，.btn:nth-of-type(2)没有意义；它只认标签名（button、input、p等）
:nth-child(odd) 和 :nth-of-type(even) 隔行变色效果不同？正常
两者计算基数不同，结果自然不同。比如父容器下有 <p></p><div></div><p></p><p></p>：
立即学习“前端免费学习笔记（深入）”；
-
p:nth-child(odd)匹配第 1 个和第 3 个p（因为它们分别位于第 1、第 3 个子位置） -
p:nth-of-type(even)匹配第 2 个和第 3 个p（因为这是第 2、第 3 个p元素） - 所以同一套规则，在混合结构里用错伪类，视觉节奏就全乱了
不写标签名直接用 :nth-child(2) 或 :nth-of-type(2)？后果很具体
省略前面的选择器，语义就变了：
-
:nth-child(2)会选中父元素下**第二个子节点**，无论它是什么类型（可能是p、div、甚至一段空格文本） -
:nth-of-type(2)会分别选中每种标签类型的第二个实例：第二个p、第二个div、第二个span……全部命中 - 这种写法极少用于生产环境，除非你明确需要跨类型批量控制，否则极易引发意外样式覆盖
真正麻烦的不是语法记不住，而是 DOM 里那些看不见的文本节点和注释——它们让 :nth-child 的“第几个”悄悄偏移，而 :nth-of-type 对它们视而不见。调试时打开浏览器开发者工具的 Elements 面板，把鼠标悬停在父元素上，挨个点开子节点，才能看清“第几个”到底数到了谁。
