css3 :nth-child选择器的使用
1.定义
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
2.用法(转自:https://www.cnblogs.com/knuzy/p/9154345.html)
(1)nth-child(n)：父元素下的第n个子元素，n>0，索引从1开始。不区分子元素类型。
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> :nth-child()选择器的使用</title> <style> /* 选择第4个li设置颜色 */ ul li:nth-child(4){ color: brown; } </style> </head> <body> <ul> <li>火龙果</li> <li>榴莲</li> <li>苹果</li> <li>香蕉</li> <li>桂圆</li> <li>梨子</li> <li>芒果</li> </ul> </body> </html>
效果:
(2). nth-child(odd)：父元素下的奇数子元素，等同于：nth-child(2n-1)。区分子元素类型。
/* 选择奇数个li设置样式 */ ul li:nth-child(odd){ color: brown; }
效果:
(3). ntn-child(even)：父元素下的偶数子元素，等同于：nth-child(2n)。区分子元素类型。
/* 选择偶数个li设置样式 */ ul li:nth-child(even){ color: brown; }
(4). nth-child(an+b)：父元素的an+b个子元素，区分子元素类型。
描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。
/* 选择an+b个子元素li设置样式 */ ul li:nth-child(3n+1){ color: brown; }
效果:
(5).nth-child(n+3) 表示选择列表中的标签从第3个开始到最后（正向选择），代码如下(以下转自:https://www.cnblogs.com/cui-ting/p/11422412.html)：
ul li:nth-child(n+3) { color: brown; }
效果图:
(6).nth-child(-n+3)表示选择列表中的标签从0到3，即小于3的标签（逆向选择），代码如下：
ul li:nth-child(-n+3) { color: brown; }
效果:
(7)nth-last-child(3)表示选择列表中的倒数第3个标签，代码如下：
ul li:nth-last-child(3) { color: brown; }
效果:
(8).first-child：父元素下的第一个子元素，如果第一个子元素不是该类型，选择不到。等同于：nth-child(1)。
ul li:first-child{ color: brown; }
效果图:
(9). last-child：父元素下的最后一个子元素，如果最后一个子元素不是该类型，选择不到。
ul li:last-child{ color: brown; }
参考文章:
https://www.cnblogs.com/knuzy/p/9154345.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？