简单隔行变色

最新推荐文章于 2021-08-23 14:16:08 发布

如期而至°

最新推荐文章于 2021-08-23 14:16:08 发布

阅读量218

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_45435600/article/details/96727542

版权

Web前端专栏收录该内容

6 篇文章 1 订阅

订阅专栏

简单隔行变色

HTML:

  <ul id="newsBox">
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
    </ul>

CSS:

    *{margin: 0;padding: 0;}
    ul{list-style: none;}
    #newsBox{
        box-sizing: border-box;
        width: 300px;
        padding: 20px;
        border: 2px solid lightblue;
        margin: 20px auto;
    }
    #newsBox li{
        line-height: 35px;
        border-bottom: 1px dashed lightcoral;
    }
    #newsBox li:nth-last-child(1){
        border-bottom: none;
    }

基于CSS实现

  #newsBox li:nth-child(even){
        background:lightcoral;
    }
    #newsBox li:hover{
        background: aliceblue;
    }

基于JS实现

  for(let i=0;i<newsList.length;i++){
        //newsList[i] 当前本来循环我们要操作的这个li
        let curLi=newsList[i];
     /*    if(i%2===0){
            //索引是偶数，代表奇数行
            curLi.style.background='#fff'
        }else{
            //索引是奇数，代表偶数行
            curLi.style.background='#ddd'
        } */
        curLi.style.background=i%2===0?'#fff':'#ddd';
    }