css指定第n个元素样式怎么写_使用css:nth child精确定位
#技术教程 发布时间： 2026-01-01
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
BC
-
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…）
上一篇 : 鲁大师手机版怎么给手机跑分_手机鲁大师性能评测指南
下一篇 : Python如何将XML转换为字典列表
-
SEO外包最佳选择国内专业的白帽SEO机构，熟知搜索算法，各行业企业站优化策略！
SEO公司
-
可定制SEO优化套餐基于整站优化与品牌搜索展现，定制个性化营销推广方案！
SEO套餐
-
SEO入门教程多年积累SEO实战案例，从新手到专家，从入门到精通，海量的SEO学习资料！
SEO教程
-
SEO项目资源高质量SEO项目资源，稀缺性外链，优质文案代写，老域名提权，云主机相关配置折扣！
SEO资源
-
SEO快速建站快速搭建符合搜索引擎友好的企业网站，协助备案，域名选择，服务器配置等相关服务！
SEO建站
-
快速搜索引擎优化建议没有任何SEO机构，可以承诺搜索引擎排名的具体位置，如果有，那么请您多注意！专业的SEO机构，一般情况下只能确保目标关键词进入到首页或者前几页，如果您有相关问题，欢迎咨询！
