CSS 中 nth-child 选择器的详细用法和示例

CSS 中的 :nth-child(an+b) 是一个"结构伪类"选择器，它按照元素在 同一父元素下所有同级子节点的"绝对序号" 来匹配，而不是只看"同类"元素。

语法公式：

:nth-child(an + b)   /* a、b 为整数，n 从 0 开始递增 */

常用关键字/公式速查

• odd  等价于 2n+1
• even  等价于 2n
• 3n+1  第 1、4、7... 项
• -n+5  前 5 项（n=0→5, n=1→4 ... n=5→0，之后为负不再匹配）

完整规则与示例

1. 序号从 1 开始计数，且先按位置找，再核对类型 。

   若第 n 个子节点不是写在选择器前面的类型，则匹配失败。

   例：div:nth-child(3) 只有当父元素的第 3 个子节点同时是 div 时才生效。

2. 典型用法

   表格隔行变色

   tr:nth-child(even) { background:#f5f5f5; }  /* 偶数行 */
   tr:nth-child(odd)  { background:#fff; }    /* 奇数行 */

   列表前 3 项高亮

   li:nth-child(-n+3) { color: red; }

   每 3 张图片去掉右边距

   .gallery img:nth-child(3n) { margin-right: 0; }

3. 与 :nth-of-type 的区别
   :nth-child 先数所有兄弟 ，再核对类型；
   :nth-of-type 只数同类兄弟 ，再取第 n 个。

   示例 HTML：

   <article>
     <p>P1</p>
     <div>D1</div>
     <p>P2</p>
   </article>

   • p:nth-child(3) 能命中"P2"，因为第 3 个子节点就是 p。
   • p:nth-child(2) 不会命中任何元素，因为第 2 个子节点是 div。
   • p:nth-of-type(2) 会命中"P2"，它只数 p 的同类顺序。

4. 性能提示

   避免过度嵌套（如 html body div.wrapper ... :nth-child），保持选择器扁平；

   对于大数据列表，优先在父级一次性写规则，不要给每项再加类。

掌握"先定位序号、再核对类型"的核心思想，就可以用 :nth-child 一套公式搞定条纹、循环、切片等各种排版需求，而无需额外类名或脚本。