CSSnth-child选择器使用详解

CSS的:nth-child()选择器常被误解为“第几个同类型元素”，实则它严格依据元素在父容器中所有子节点（无论标签、可见性或类名）的绝对位置进行匹配，空格换行等文本节点虽理论上计入但现代浏览器通常忽略；其核心在于理解an+b公式中n从0开始代入后生成的有效序号，以及odd/even等关键字的直观用法；而最易出错的是混淆:nth-child()与:nth-of-type()——前者要求位置与选择器条件同时满足，后者才真正按同类元素排序选取，因此实际开发中务必先用开发者工具审视DOM结构再下笔，避免盲目猜测导致样式失效。

什么是 :nth-child() 的“序号”？

这个序号不是你肉眼看到的第几个 li 或第几个 div，而是它在**父元素所有子节点中的绝对位置**——从 1 开始数，不管类型、不管是否隐藏、不管有没有类名。

• 如果父元素是
  ，里面依次是
  • A
  、

  B

  、
  • C
  ，那么第二个 li（即 C）其实是父元素的第 3 个子元素，li:nth-child(3) 才能选中它
  • li:nth-child(2) 在这个例子里会失效，因为第 2 个子元素是 p，不是 li
  • 空格、换行、注释在 HTML 中也会生成文本节点，但现代浏览器通常忽略它们对 :nth-child() 计数的影响；不过嵌入了