本文编辑:小秋同学

css3实现隔行换色

小秋同学 10-17 12:02:44 学习园地
摘要: <!doctype html><html><head><meta charset="utf-8"><title>css3隔行换色测试</title><m摘要: <!doctype html><html><head><meta charset="utf-8"><title>css3隔行换色测试</title><m

css3实现隔行换色(图1)

css3实现隔行换色(图2)

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS3隔行换色测试</title>

<meta name="description" content="" />

<style>

#divst1 div:nth-of-type(odd){background:#00CCFF;}/*奇数行*/

#divst1 div:nth-of-type(even){background:#FFCC00;}/*偶数行*/


#divst2 div:nth-child(4n+1){background:#00CCFF;}/*从第一行开始算起 每隔4个(包含第四个)使用次样式*/

#divst00000 div:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个(包含第四个)使用次样式*/

#divst00000 div:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个(包含第四个)使用次样式*/

#divst00000 div:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个(包含第四个)使用次样式*/

</style>

</head>


<body>

<ul id="divst1">

    <div>1111111</div>

    <div>222222222222CSS3</div>

    <div>333333333</div>

    <div>44444444</div>

    <div>55555555555555</div>

    <div>66666666666666666</div>

</ul>

<hr/>

<ul id="divst2">

    <div>11111111111111</div>

    <div>22222222222222</div>

    <div>33333333333333</div>

    <div>444444444444444</div>

    <div>55555555555555</div>

    <div>66666666666666666</div>

</ul>

</body>

</html>



第二种


前两天刚好做过这个

QQ截图20201017165108.png

.rec-list .rec-th {cursor:pointer;background-color:#f5f5f5;display:block;}

.rec-list > .rec-item:nth-child(2n)  .rec-th{background-color:#ffffff;}

nth-child(2n)这个就行,当然楼上管理员的奇偶数也可以


文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/766.html发布于 10-17 12:02:44
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~