nth-child选择器按子元素位置匹配，不区分类型；语法为selector:nth-child(n)，n为正整数或表达式（如2n、2n+1、-n+5等）；区别于nth-of-type，后者只计同类元素。

用 nth-child 选择器可以精准匹配父元素下的第 n 个子元素，但要注意它只认“位置”，不区分元素类型。

基础写法：指定第 n 个子元素

语法是 selector:nth-child(n)，其中 n 是正整数（从 1 开始计数）。

• li:nth-child(3) → 选中父容器里**位置排第 3 的 li 元素**（前提是它确实是第 3 个子元素）
• 如果第 3 个子元素是
  ，那这条规则不会生效

常用模式：不只是固定数字

n 可以是表达式，实现批量匹配：

• li:nth-child(2n) → 所有偶数位置的 li（2、4、6…）
• li:nth-child(2n+1) → 所有奇数位置的 li（1、3、5…）
• li:nth-child(3n) → 每隔 2 个选 1 个（3、6、9…）
• li:nth-child(3n+2) → 从第 2 个开始，每 3 个一循环（2、5、8…）

注意：nth-child 和 nth-of-type 的区别

nth-child 看的是“第几个子节点”，nth-of-type 看的是“第几个同类型元素”：

• HTML：

  A

  B

  C

• p:nth-child(2) → 不匹配（第 2 个子元素是 ）
• p:nth-of-type(2) → 匹配 C（它是第 2 个
  ）

实用技巧：跳过前几个再开始计数

用 -n + 数字 可以实现“从第 N 个起生效”：

• li:nth-child(-n+5) → 匹配前 5 个 li（n=1 到 5 时，-n+5 ≥ 1）
• li:nth-child(n+4) → 从第 4 个开始往后全部匹配（n=4,5,6…）

# css  # html  # 区别  # 循环  # 选择器  # li  # 的是  # 几个  # 正整数  # 它是  # 这条  # 可以实现  # 但要  # 每隔  # 跳过 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  Java Adapter 适配器模式（类适配器，对象适配器）优缺点对比  如何实现建站之星域名转发设置？  Laravel怎么调用外部API_Laravel Http Client客户端使用  如何在云主机上快速搭建网站？  如何生成腾讯云建站专用兑换码？  深圳网站制作平台,深圳市做网站好的公司有哪些？  网站制作软件免费下载安装,有哪些免费下载的软件网站？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Laravel怎么判断请求类型_Laravel Request isMethod用法  JavaScript Ajax实现异步通信  php485函数参数是什么意思_php485各参数详细说明【介绍】  香港服务器部署网站为何提示未备案？  Laravel Admin后台管理框架推荐_Laravel快速开发后台工具  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  Laravel如何实现数据库事务？（DB Facade示例）  Laravel中间件如何使用_Laravel自定义中间件实现权限控制  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  如何在阿里云通过域名搭建网站？  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法  非常酷的网站设计制作软件,酷培ai教育官方网站？  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  如何快速生成凡客建站的专业级图册？  清除minerd进程的简单方法  javascript如何操作浏览器历史记录_怎样实现无刷新导航  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Laravel Eloquent关联是什么_Laravel模型一对一与一对多关系精讲  教学论文网站制作软件有哪些,写论文用什么软件 ？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  如何快速上传建站程序避免常见错误？  Android中AutoCompleteTextView自动提示  jimdo怎样用html5做选项卡_jimdo选项卡html5实现与切换效果【指南】  黑客入侵网站服务器的常见手法有哪些？  如何用5美元大硬盘VPS安全高效搭建个人网站？  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  香港代理服务器配置指南：高匿IP选择、跨境加速与SEO优化技巧  香港服务器网站推广：SEO优化与外贸独立站搭建策略  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  Linux网络带宽限制_tc配置实践解析【教程】  如何挑选高效建站主机与优质域名？  Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  iOS UIView常见属性方法小结  Angular 表单中正确绑定输入值以确保提交与验证正常工作  如何快速搭建高效WAP手机网站吸引移动用户？  简单实现Android验证码  Android滚轮选择时间控件使用详解