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');    
          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
标签
css
nth-of-type
css样式