纯css之隔行换色

最新推荐文章于 2024-07-12 18:29:20 发布

小码农吗

最新推荐文章于 2024-07-12 18:29:20 发布

阅读量2k

点赞数 1

分类专栏：日常栏目文章标签： css

本文链接：https://blog.csdn.net/qq_42818496/article/details/111190454

版权

日常栏目专栏收录该内容

81 篇文章 4 订阅

订阅专栏

<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>css3隔行变换色</title> 
	<style type="text/css"> 
		#list1 li:nth-of-type(odd){ background:#00ccff;}奇数行 
		#list1 li:nth-of-type(even){ background:#ffcc00;}偶数行 
		#list2 li:nth-child(4n+1){ background:#00ccff;}从第一行开始算起 每隔4个（包含第四个）使用此样式 
		#list00000 li:nth-child(4n+2){background:#090;}从第二行开始算起 每隔4个（包含第四个）使用次样式 
		#list00000 li:nth-child(4n+3){background:#009;}从第三行开始算起 每隔4个（包含第四个）使用次样式 
		#list00000 li:nth-child(4n+4){background:#990;}从第四行开始算起 每隔4个（包含第四个）使用次样式 
	</style> 
</head> 
<body> 
	<div> 
		<ul id="list1"> 
			<li>遇好晴天、好山水、好书、好字画、好花、好酒、好心情，须受用领略，方不虚度。</li> 
			<li>人生苦短，一定要知恩、知足、知命、知道、知幸，心不贪荣身不辱。杨柳风、梧桐月、芭蕉雨、梅花雪、香椿芽、野菜根、茄子把、豆腐泥、俗与雅、素与荤，全能招呼，人生一乐也。</li> 
			<li>我和超人唯一的区别就是我把内裤穿里边了。</li> 
			<li>不要以为有纹身的都是流氓，岳飞还有纹身呢。</li> 
			<li>不成熟的人为了伟大的事业而死去，</li> 
			<li>成熟的人为了伟大的事业而卑贱地活着。</li> 
		</ul> 
	<hr /> 
		<ul id="list2"> 
			<li>遇好晴天、好山水、好书、好字画、好花、好酒、好心情，须受用领略，方不虚度。</li> 
			<li>人生苦短，一定要知恩、知足、知命、知道、知幸，心不贪荣身不辱。杨柳风、梧桐月、芭蕉雨、梅花雪、香椿芽、野菜根、茄子把、豆腐泥、俗与雅、素与荤，全能招呼，人生一乐也。</li> 
			<li>我和超人唯一的区别就是我把内裤穿里边了。</li> 
			<li>不要以为有纹身的都是流氓，岳飞还有纹身呢。</li> 
			<li>不成熟的人为了伟大的事业而死去，</li> 
			<li>成熟的人为了伟大的事业而卑贱地活着。</li> 
		</ul> 
	</div> 
</body>

😁 作者：Teddy (公众号：鸡仓故事汇)
ok！到这里就大功告成，小编（Teddy）在这里先感谢大家的到来。
虽然不是太详细，小编已经很努力，给小编来个一键三连(点赞，关注，收藏)，小编会越来越努力。。。

小码农吗

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
纯css之隔行换色

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3隔行变换色</title> <style type="text/css"> #list1 li:nth-of-type(odd){ background:#00ccff;}奇数行 #list1 li:nth-of-type(even){ backgro
复制链接

扫一扫

专栏目录