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>撒差多少VCD深V上次的深V但是是的深V的深V是DVD深V的深V的深V是大Vsad深V是的v</li>
<li>大SAV吃撒撒发顺丰</li>
<li>萨芬从深V撒VCDVD深V是大V撒大V大是发大V是大V是哒但是啥的 </li>
<li>撒房产税才是</li>
<li>阿深V大SAV的在v</li>
<li>上次大家成都你cdsvdvd vax v a 杀虫水</li>
<!-- /*==利用css优先级搞定：默认背景颜色基于样式类完成，鼠标滑过的样式比样式类优先级高一些（ID
选择器/行内样式） -->