网页编程网
www.youkud.com
掌握计算机、网络技术，让生活更美好！
主页
网页制作
html5
JavaScript
DIV+CSS
前端美工
网络编程
Java与JSP
PHP
Python 3
Golang
数据库
Mysql
Oracle
NoSQL
SQLite
运维
Linux
正则表达式
架构
网页特效
移动开发
网络
SDN
QUIC
网络原理
人工智能
强化学习
机器学习
区块链
区块链1
区块2
dapp
理论
dapp案例
数据采集
爬虫技术
爬虫案例
当前位置：
主页
>>
网页特效
>> 正文
css3应用nth-of-type(odd)实现li隔行变色
阅读：5020 输入：2021-04-21 09:29:12
<html><head> <meta charset="utf-8"> <title>css3隔行变换色</title> <style> #list1 li:nth-of-type(odd){background:#00ccff;}奇数行 #list1 li:nth-of-type(even){background:#ffcc00;}偶数行 #list2 li:nth-child(4n+1){background:red;}从第一行开始算起 每隔4个（包含第四个）使用此样式 #list3 li:nth-child(4n+2){background:#090;}从第二行开始算起 每隔4个（包含第四个）使用次样式 #list4 li:nth-child(4n+3){background:#009;}从第三行开始算起 每隔4个（包含第四个）使用次样式 #list5 li:nth-child(4n+4){background:#990;}从第四行开始算起 每隔4个（包含第四个）使用次样式 </style> </head> <body> <p>使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：p:nth-of-type(3n+0){background:#ff0000;}</p> <ul id="list1"> <li>1111111你是一只狗</li> <li>222222222222CSS3隔行换色测试</li> <li>333333333提供jquery 教程实例学习代码、html5教程实例和css/css3教程实例学习代码。</li> <li>44444444你愿意成为一只狗吗</li> <li>55555555555555</li> <li>66666666666666666</li> </ul> <hr /> <ul id="list2"> <li>1111111你是一只狗</li> <li>222222222222CSS3隔行换色测试</li> <li>333333333提供jquery 教程实例学习代码、html5教程实例和css/css3教程实例学习代码。</li> <li>44444444学习、发现、分享、交流</li> <li>55555555555555</li> <li>66666666666666666</li> </ul> </body></html>
上一篇：
php导出sqlite3中数据成sql语句
下一篇：
js实现简单富文本编辑器一
相关阅读
CSS3实现太极图
html5+css3制作图片旋转
css3自定义变量，实现switch开关
下载专区
软件下载（提取码：mtag）
Tag
网站Tag
标签云
HTML工具
进制间转换
进制转换（带小数）
html代码运行
HTML工具
字母翻转
硬盘整数分区
html颜色代码
HTML工具
除空格回车
万年历
fojiao
HTML工具
小游戏
在线绘画
更多
手机版
联系微信:jingqishens