:nth-child(even)匹配父元素下DOM顺序为偶数（2、4、6…）的子元素，从1开始计数，不区分类型且包含所有同级子元素；等价于:nth-child(2n)，注意与:nth-of-type(even)的区别。

在 CSS 中，想只给偶数位置的元素（比如第 2、4、6…个）加样式，最直接的方式就是用 :nth-child(even) 伪类选择器。

什么是 :nth-child(even)？

它会匹配父元素下所有子元素中，处于偶数位置（即索引为 2、4、6…）的元素，**按 DOM 顺序计数，从 1 开始**。注意：不是按 class 或标签筛选后再数，而是对所有子元素统一编号后取偶数位。

例如：

• li:nth-child(even) → 给
  或
  中第 2、4、6…个
• 加样式
• div:nth-child(even) → 给父容器里第 2、4、6…个
  加样式（前提是它是该位置上的子元素）

  常见写法和等价形式

  :nth-child(even) 等价于：

  • :nth-child(2n) —— 更灵活，可扩展为 2n+1（奇数）、3n（每 3 个选一个）等
  • :nth-child(2n+0) —— 数学上等价，但不常用

  推荐优先使用 2n，逻辑更清晰，也方便后续调整周期。

  要注意的坑

  这个选择器容易误用，关键点有三个：

  

  htmlppt.skill

  把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

  下载

  • 必须是同级子元素：如果目标元素中间夹着其他标签（比如
    、），计数会把它们一起算进去
  • 起始编号是 1，不是 0：所以第 2 个才是第一个“偶数位”，不是第 0 个
  • 不区分元素类型：哪怕你写的是 li:nth-child(even)，但如果第 2 个子元素其实是
    ，那这条规则不会生效——因为不匹配 li

    实用小技巧

    如果想“忽略非目标标签，只对某类元素按偶数序号样式”，可以用 :nth-of-type()：

    • li:nth-of-type(even) → 只统计
    • 标签，第 2、4、6…个
    • 才命中（跳过中间的其他标签）
    • 适合列表中混有标题、分隔线等非 li 元素的场景

    简单对比：

    HTML 示例：
    

    
      
    • A
    
      
    干扰项
    
      
    • B
    
      
    • C
    
    

    
    

    li:nth-child(even) → 不生效（第 2 个子是

    ，不是 li）
li:nth-of-type(even) → 给 B 和 C 中的第 2 个 li（即 C）加样式

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！