<!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); //=>搞个循环来完成我们的样式赋值