【实测】CSS样式nth-child的灵活使用技巧及使用方法-Discuz教程下载
登录
/
注册
首页
Portal
Discuz模板
Discuz插件
Discuz教程
DIV模块素材
站长导航
问题反馈
Discuz!数据字典
TAG标签
站长工具
Discuz站长交流群欢迎您的加入:493651246
兔源码站长交流群:493651246 欢迎您的加入!
Discuz站长2000人QQ交流群:493651246
站长工具
Favicon图标转换器
提供在线裁剪图片,并转换为favicon.ico文件。
CSS美化工具
提供在线 CSS 代码在线格式化和美化。
二维码生成器
快速生成二维码,自定义大小、生成码及颜色。
HTML编辑器
输入HTML、CSS、JS代码,实时运行效果。
Markdown编辑器
编写markdown代码,并在浏览器中实时预览。
SQL格式化
实现SQL语句的在线压缩与格式化功能。
URL编码解码
在线将普通URL相互转换转为编码URL的工具。
随机密码生成器
提供在线生成随机卡密等等。
站长导航
站长工具
开发工具
站长平台
IDC服务商
注册交易
SEO及安全
开放平台
CDN及SSL
源码资源
自媒体平台
图片工具
小程序平台
投资理财
常用工具
友情链接
网络硬盘
TAG标签
Discuz
网站模板
discuz插件
免费
原创
商业版
文章
下载地址
GBK
门户
手机版
自适应
模板
插件
编辑器
UTF8
数据库
伪静态
博客
论坛
模块
分类信息
主题
全部TAG
Discuz!数据字典
站长之家
[
QQ登录
/
登录
/
注册
]
Discuz站长群邀您加入
草根站长交流群欢迎您
广告招租:3197813386
网站一条龙搭建服务
——网站快速搭建——
——建网站,找我们——
首页
Portal
Discuz模板
Discuz插件
Discuz教程
DIV模块素材
站长导航
问题反馈
搜索
搜索
本版
文章
帖子
用户
帖子
勋章
设置
收藏
退出
【实测】CSS样式nth-child的灵活使用技巧及使用方法
来自
版块
:
Discuz教程
发表于:
2023-7-25 14:20:43
3302
如本资源下载地址失效,请点击此处进行反馈
一、需求描述
在开发过程中,会碰到一些选择器的需求:
例如使列表中的第一项或者最后一项显示不同的
样式
、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。
我们可以通过
CSS
来实现这样的效果,CSS 给我们提供了几个样式参数:first-child、last-child、nth-child(n)。
二、使用方法的代码示例
1.常见使用方法
first-child first-child:选择列表中的第一个
标签
。
举例:第一行字体显示为红色,代码如下:
li:first-child{color: red;}
复制代码
nth-child(n) nth-child(n):选择列表中的第 n 个标签。
举例:第三行字体显示为蓝色,代码如下:
li:nth-child(3){color: blue;}
复制代码
nth-child(odd) nth-child(odd):选择列表的奇数行。
举例,奇数行背景显示为灰色,代码如下:
li:nth-child(odd){ background: #999; }
复制代码
我们可以通过另外的方法选择奇数行,例如: nth-child(n+1) 、 nth-child(2n-1) 等。
代码如下:
/*First*/
li:nth-child(n+1){ background: #999; }
复制代码
/*Second*/
li:nth-child(2n-1){ background: #999; }
复制代码
nth-child(even) nth-child(even):选择列表的偶数行。
举例:偶数行背景显示为土黄色(不要在意那些细节),代码如下:
li:nth-child(even){ background: #F6E0AF; }
复制代码
同样,我们可以通过另外的方法选择偶数行,例如: nth-child(2n) 。
代码如下:
li:nth-child(2n){ background: #F6E0AF; }
复制代码
上面的几种方法运行效果如下图:
2.更加灵活的使用方法
上面是几种比较常见的选择方法,我们还可以通过 CSS 更灵活的进行选择,有下面几种方法:
nth-child(-n+n) nth-child(-n+n):选择第 n 个之前的元素(此处的 n 是后面的那个,下同)。
举例:前三行背景色设置为绿色,代码如下:
li:nth-child(-n+3){ background: #2cae1d; }
复制代码
nth-child(n+n) nth-child(n+n):选择第 n 个之后的元素。
举例:第五行及以后背景色设置为蓝色,代码如下:
li:nth-child(n+5){ background: #0ab1fc; }
复制代码
nth-last-child(n) nth-last-child(n):选择倒数第 n 个元素。
举例:倒数第三元素字体设置为红色,代码如下:
li:nth-last-child(3){ color: red; }
复制代码
同样可以使用上面的方法进行拓展,方法如下:
nth-last-child(n+n) nth-last-child(n+n):选择倒数第 n 个之前的元素。
举例:倒数第三个及之前的元素字体设置为粗体,代码如下:
li:nth-last-child(n+3){ font-weight: bold; }
复制代码
上面的几种方法运行效果如下图:
nth-last-child(3n) nth-last-child(3n):选择第 3、6、. . . 个元素,选择三的倍数。
举例:第3、6、 . . . 三的倍数行背景色设置为橙色,代码如下:
li:nth-child(3n){ background: orange; }
复制代码
nth-last-child(3n+1) nth-last-child(3n+1):选择第 1、4、7 个元素,从第一个开始每个递增三个。
举例:第1、4、7 . . . 行背景色设置为红色,代码如下:
li:nth-child(3n+1){ background: red; }
复制代码
上面的几种方法运行效果如下图:
实测
,
CSS
,
样式
,
灵活
,
使用
,
技巧
,
方法
相关帖子
【实测】discuz去掉或修改搜索框里面的默认文字
文字由左向右循环滚动DIY+CSS+js模块
垂直时光轴HTML单页+CSS+js模块
discuz 模板中使用方法和语言标签
html5+css3的四排图文资讯列表DIY模块
【实测】Discuz更换域名,提示500错误或配置有误:由于权限不足而无法读取配置文件的解决方法
【实测】Discuz修改论坛列表页排序,实现主题帖子按最新发表时间排序
html5+css3的浮窗单图DIY模块
Discuz浮窗多图的DIY单页素材
【原创】将文章访问量转换为K的的显示样式,如将21302转换为21.3k
回复
举报
综合
最新
热度
发表评论
教程 / CSS+DIV素材
Discuz教程
CSS+DIV素材
1
【原创】将文章访问量转换为K的的显示样式,如将21302转换为21.3
388人阅读
2
【原创】discuz论坛分类信息中,帖子发布页有多个图片上传功能,
638人阅读
3
【原创】修改discuz门户文章发布时间,将默认时间yyyy-mm-dd修改
617人阅读
4
【实测】Discuz修改论坛列表页排序,实现主题帖子按最新发表时间
740人阅读
5
Discuz! X3.2 - X3.4 升级至 Discuz! X3.5 详细教程
699人阅读
1
Discuz浮窗多图的DIY单页素材
681人阅读
2
html5+css3的浮窗单图DIY模块
730人阅读
3
html5+css3的横排导航列表DIY模块
821人阅读
4
html5+css3的四排图文资讯列表DIY模块
820人阅读
5
垂直时光轴HTML单页+CSS+js模块
1479人阅读
发布新话题
所属版块
返回版块
最佳新人
注册账号后积极发帖的会员,发帖数 ≥ 100
管理/版主
此勋章为兔源码管理或版主专属勋章
土豪装逼
此勋章为兔源码土豪装逼勋章,只要100兔币购买即可
返回顶部