js和css多种方式实现隔行变色
Posted 公子清
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js和css多种方式实现隔行变色相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>两种方式让css隔行变色js和css3属性.box li:nth-of-type</title>
<style>
*{
margin:0;
padding:0;
/* 通配符，表示所有标签元素。 */
}
ul, ol {
list-style:none;
}
.box {
margin:20px auto;
width:300px;
}
.box li{
padding:0 5px;
line-height:35px;
border-bottom:1px dashed #AAA;
/* 可点击的小手 */
cursor: pointer;
/* 超过一行的内容裁切三个点来代替 */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* 以下css3完成 */
/* nth-child(n):当前容器所有子元素中的第n个 */
/* .box li:nth-child(1):box容器所有子元素的第一个并且标签名是li的 */
/* nth-of-type(n):先给当前容器按照某一个标签名进行分组，获取分组中的第n个 */
/* .box li:nth-of-type(1): 先获取box中的所有li，在获取li中的第一个 */
.box li:nth-child(1) {
color:aqua;
}
/* .box li:nth-of-type(even){
background: #AAA;
EVEN:偶数 ODD：奇数
} */
/* 三行为一组变颜色 */
/* .box li:nth-of-type(3n+1){
color:red;
}
.box li:nth-of-type(3n+2){
color:green;
}
.box li:nth-of-type(3n){
color:darkmagenta;
} */
.box li:hover {
background:lightcoral;
/* 鼠标滑过有样式，离开原样式 */
}
.bgColor {
background-color:lightcyan;
}
</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>
</ul>
<script>
var oBox = document.getElementById(‘box‘);