HTML系列:n种方式实现隔行变色

n种方式实现隔行变色

  <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>n种方式实现隔行变色</title><style>.box {margin: 20px auto;width: 300px;}.box li {line-height: 35px;border-bottom: 1px dashed #AAA;padding: 0 5px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;}/* 1.css3第一种方式 *//* .box li:nth-of-type(3n+1){background-color: green;}.box li:nth-of-type(3n+2){background-color: red;}.box li:nth-of-type(3n){background-color: blue;} *//* //=> bgColor与ulList组合2种方式实现 *//* .bgColorYellow {background-color: yellow;}.bgColorRed {background-color: red;}.bgColorBlue {background-color: blue;}  *//* //=> bgColor与ulList组合1种方式实现 */.bg0 {background-color: lightcoral;}.bg1 {background-color: lightgreen;}.bg2 {background-color: lightskyblue;}#hover {background-color: red;}/* 我们把hover放在bgn的后面,当元素的class=‘bgo’以bgo样式为主 */.hover {background-color: blueviolet;}</style>
</head><body><ul class="box" id="box"><li>上次大家成都你cdsvdvd vax v a 杀虫水</li><li>撒差多少VCDV上次的深V但是是的深V的深VDVDV的深V的深V是大Vsad深V是的v</li><li>SAV吃撒撒发顺丰</li><li>萨芬从深VVCDVDV是大V撒大V大是发大V是大V是哒但是啥的 </li><li>撒房产税才是</li><li>阿深VSAV的在v</li><li>上次大家成都你cdsvdvd vax v a 杀虫水</li><!-- /*==利用css优先级搞定:默认背景颜色基于样式类完成,鼠标滑过的样式比样式类优先级高一些(ID选择器/行内样式) -->

运行效果如下:
在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部