主页
M
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隔行变色
2021-04-21
网页编程网
网页编程网
<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>
阅读原文
阅读
4478
123
显示电脑版