网站首页 > 技术文章 正文
做前端一定要记住:nth-child(2)这个选择器,它可以帮你轻松选择你想要的标签并给与修改添加样式
下面通过几个例子说明,相信你一看就明白
li:nth-child(2){background:#090}
:nth-child(2)表示选取第几个标签,”2可以是你想要的数字”
li:nth-child(n+4){background:#090}
:nth-child(n+4)选取大于等于4标签,”n”表示从整数
li:nth-child(-n+4){background:#090}
:nth-child(-n+4)选取小于等于4标签
li:nth-child(2n){background:#090}
:nth-child(2n)选取偶数标签,2n也可以是even
li:nth-child(2n-1){background:#090}
:nth-child(2n-1)选取奇数标签,2n-1可以是odd
li:nth-child(3n+1){background:#090}
:nth-child(3n+1)自定义选取标签,3n+1表示”隔二取一”
li:last-child{background:#090}
:last-child选取最后一个标签
li:nth-last-child(3){background:#090}
:nth-last-child(3)选取倒数第几个标签,3表示选取第3个
猜你喜欢
- 2024-11-09 「项目实战」.作家管理系统之Web应用(四)
- 2024-11-09 jQuery 单引号和双引号区别 js单双引号转义
- 2024-11-09 jQuery的DOM操作 jquery对象和dom对象
- 2024-11-09 CSS2与CSS3中常用的伪类汇总大全 css伪类hover
- 2024-11-09 自动化测试:Selenium八大元素定位简单介绍
- 2024-11-09 想让AI 驱动 UI 测试?大佬推荐这个自动化工具!
- 2024-11-09 CSS怎么选择除了第一个子元素外的其余同级子元素
- 2024-11-09 js函数--倒计时模块+无缝滚动 js实现倒计时60秒的简单代码
- 2024-11-09 Web前端开发-CSS中伪类和伪元素 css3伪类和伪元素
- 2024-11-09 CSS 中的最后一个子级选择器与最后一个类型选择器
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-