网站首页 > 技术文章 正文
点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
CSS3有太多特性可以关注的,其中nth-child这个选择器就是当中最值得关注的特性之一,之前,我写过一篇文章,当中用了两句话来搞了一下nth-child和nth-of-type的区别, 今天,这篇我们重点来关注一下nth-child的常规应用,看有哪些是你没有用到的。
一, 选择第几个标签
例如选择第2个标签,可以这么搞:
ul li:nth-child(2){color:red}
二,选择小于等于5标签
其中n表示从整数,注意,这个时候用的是-n,如下
效果就是下面这样:
三,选择大于5标签
其中n表示从整数,注意,这个时候用的是n,如下
效果就是下面这样的:
四,选择偶数标签
其中2n也可以是even。
效果下面这样:
五,选择奇数标签
其中2n-1也可以是odd。
效果如下:
六,自定义选取标签(隔二取一)
效果是这样的:
七,选取最后一个标签
ul li:last-child{color:red}
或者选择倒数第几个标签:
ul li:last-child(3){color:red}
最后总结一下:
关于nth-child这些用法,大部分应该都用过,特别要注意第二个连续选取的用法。有时候用对了,会帮你省好多代码。
猜你喜欢
- 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)
- 最新留言
-