<!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‘);
var boxList = oBox.getElementsByTagName(‘li‘);
console.dir(boxList);
//=>搞个循环来完成我们的样式赋值
// for (var i=0;i<boxList.length;i++){
//=>索引是奇数代表偶数行
//第一种方式隔2行变色
// if(i % 2 !==0) {
// boxList[i].style.backgroundColor = ‘pink‘;
// }
//第二种方式隔2行变色
// if(i % 2 !==0) {
// boxList[i].className += ‘bgColor‘;
// }
// }
//第三种方式隔2行变色
// for (var i=0;i<boxList.length;i+= 2){
// boxList[i].style.backgroundColor= ‘lightblue‘;
// }
//第三种方式隔3行变色
for (var i=0;i<boxList.length;i+= 4){
boxList[i].style.backgroundColor= ‘yellow‘;
}
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/fron-tend/p/11978825.html
时间： 2024-10-09 01:45:39