CSS+JS实现文本隔行变色的几种方法

方案一：用CSS实现隔行变色

利用伪类选择器来实现文本背景隔行变色

<ul class="box" id="box">
    <li>这座城市也太太太太太太“魔幻”了！</li>
    <li>姜大卫回应周杰伦私生子传闻</li>
    <li>“电”亮阿妹戚托小镇<</li>
    <li>中国电影票房全球第一</li>
    <li>中超丨大连人胜广州富力</li>
    <li>美国中餐女王去世</li>
    <li>惨遭惊天大逆转！鲁能3-4不敌重庆</li>
    <li>中国杯世界花样滑冰大奖赛重庆举行 国家队主力悉数亮..</li>
    <li>国米女足十七连胜升级意甲 CEO：这是计划的第一步</li>
    <li>把一张金属片贴在手机背部，信号就能从1格变3格？</li>
    <li>如何利用滤镜或相机设置来改变人像照片的色调</li>
</ul>

实现效果

      * {
   
            margin: 0;
            padding: 0;
        }
        li {
   
            list-style: none;
        }
        .box {
   
            width: 300px;
            margin: 100px auto;
        }
        li {
   
            line-height: 35px;
            margin: 0 10px;
            border-bottom: 1px dashed #aaa;
            /*让溢出的文字自动省略，以...显示*/
            text-overflow: ellipsis;
            /*让溢出的文字自动隐藏*/
            overflow: hidden;
            /*让文字强制不换行*/
            white-space: nowrap;
        }
        
/* 实现效果*/
/*3n 是代表有三组，每一组的第几个*/
        .box  li:nth-of-type(3n+1) {
   
            background-color: red;
        }
        .box  li:nth-of-type(3n+2) {
   
            background-color: green;
        }
        .box  li:nth-of-type(3n+3) {
   
            background-color: blue;
        }

选择父元素下的第n个元素，不管子元素是不是同一种标签，都是从第n个开始。
如：
n为倍数， 1 为偏移量
使用公式（an+ b): a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。

nth:nth-child(n) 当前容器所有子元素中的第n个
但是此时：ul li:nth-child(1) ：ul容器所有子元素中的第一个并且标签名是li 的意思。
如果li前面加一个span标签的话，直接用ul li:nth-child(1) 是获取不到的，因为第一个的标签为span，但是代码是li的标签名
li:nth-of-type(1） 先给当前容器按照某一个标签名进行分组，再获取分组中的第n个
ul li:nth-of-type(1): 先获取box中所有的Li,在获取li中的第一个。

注意

如果是3n+的话，n前面的数字即为多少行Li为一组，如果是3的话，即3行为一组，那就是一组里面有三个li的内容，3n+的+号后面代表一组中的第几个li元素。CSS里如果设置超出3个li 以上的话（nth-of-type(3n+4），顺序即会变化，即第二次判断的时候，第一个样式就不会显示。第四个替代了。