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

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

语法公式:

css 复制代码
: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. 典型用法

    表格隔行变色

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

    列表前 3 项高亮

    css 复制代码
    li:nth-child(-n+3) { color: red; }

    每 3 张图片去掉右边距

    css 复制代码
    .gallery img:nth-child(3n) { margin-right: 0; }
  3. :nth-of-type 的区别
    :nth-child 先数所有兄弟 ,再核对类型;
    :nth-of-type 只数同类兄弟 ,再取第 n 个。

    示例 HTML:

    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 一套公式搞定条纹、循环、切片等各种排版需求,而无需额外类名或脚本。

相关推荐
fruge2 小时前
前端工程化流程搭建与配置优化指南
前端
东芃93943 小时前
uniapp上传blob对象到后台
前端·javascript·uni-app
coding随想3 小时前
救命!网页还在偷偷耗电?浏览器Battery API事件教你精准控电,这5个场景用了都说香
前端
IT_陈寒3 小时前
Redis性能翻倍的5个冷门优化技巧,90%的开发者都不知道第3个!
前端·人工智能·后端
华仔啊4 小时前
无需UI库!50行CSS打造丝滑弹性动效导航栏,拿来即用
前端·css
光影34154 小时前
专利撰写与申请核心要点简报
前端·数据库·php
ze_juejin4 小时前
Angular 中设置宿主元素(Host)样式的方法
前端
用户90443816324604 小时前
《零代码基础也能 AI 创作?GPT+DALL・E 实战教程,10 分钟上手》
前端·github
WillaWang4 小时前
aria | "Accessible Rich Internet Applications"
前端
reoreo4 小时前
如何使用 i18next 实现多种语言的国际化(从新建 vite ts 项目开始)
前端·javascript