<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

第一种方式

用css的方式实现：先给li设置一个css样式,然后使用css样式中的奇偶数行xxx:nth-child(2n/2n+1)的代码来实现隔行变色

<style>
       ul li {
           width: 400px;
           height: 100px;
           border: 1px solid coral;
           margin: 0 auto;
           list-style: none;
       }

       li:nth-child(2n){
           background: rgb(36, 218, 193);
       }
       li:nth-child(2n+1){
           background: rgb(187, 43, 43)
       }
   
   </style>

第二种方式

第二种我们可以采用js中的方法来设置，种类有很多，一共分为五个小部分。

第一小部分较为复杂，简单来说就是给每一行设置一个背景色，所设计的代码较多。

首先我们设一个变量,获取整个li，拿到一个集合

var olis =document.getElementsByTagName('li')

然后给每一行设置一个不同的颜色 注意索引[]

 olis[0].style.background ='red'
 olis[1].style.background ='orange'
 olis[2].style.background ='yellow'
 olis[3].style.background ='green'
 olis[4].style.background ='skyblue'
 olis[5].style.background ='blue'
 olis[6].style.background ='purple'

之后我们就可以拿到一个彩虹状的隔行变色了

第二小部分我们可以用for循环来做，具体代码如下：

同样的先获取li元素，步骤同上。然后做一个for循环。

var olis =document.getElementsByTagName('li')
for (var i = 0; i < 7; i++)

      olis[i].style.background='skyblue'
      i++
      olis[i].style.background='pink'
      console.log(i)

第三小部分我们可以用判断语句来写，具体代码如下

同样的先获取li元素，步骤同上。然后做一个IF ELSE判断语句。

var olis =document.getElementsByTagName('li')
 console.log(i%2)
     if (i % 2 == 0) {
         olis[i].style.background = 'skyblue'
      } else {
          olis[i].style.background = 'pink'
      }

第四小部分我们可以用三元运算来做，‘？’ ‘：’的方式

`同样的先获取li元素，步骤同上。然后做一个三元运算`

var olis =document.getElementsByTagName('li')
console.log(i%2)
i%2==0?olis[i].style.background='skyblue':olis[i].style.background='pink'}

第五小部分实际上是第四部分的简化版，作用一样，从繁化简

olis[i].style.background =i%2==0 ?'skyblue':'pink'

这就是我总结的几种不同方式的隔行变色的方法！