CSS3 - :nth-child()选择前几个元素
/* 选择第n个,n位数字 */
:nth-child(n)
选择列表中的偶数标签
:nth-child(2n)
选择列表中的奇数标签
:nth-child(2n-1)
选择前几个元素
/*【负方向范围】选择第1个到第6个 */
:nth-child(-n+6){}
从第几个开始选择
/*【正方向范围】选择从第6个开始的,直到最后 */
:nth-child(n+6){}
两者结合使用,可以限制选择某一个范围
/*【限制范围】选择第6个到第9个,取两者的交集【感谢小伙伴的纠正~】 */
:nth-child(-n+9):nth-child(n+6){}
选择列表中的倒数第n个标签 n为数字
:nth-last-child(n)
例子:
需要设置前3个元素的margin-top值与其他的不同。
div:nth-child(-n+3){
margin-top: 12px;
}
选的第一个和最后一个
first-child表示选择列表中的第一个标签
例: li:first-child{background:#fff}
last-child表示选择列表中的最后一个标签
例: li:last-child{background:#fff}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!