1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8.     <style>
    9.     *{
    10.         margin: 0;
    11.         padding:0;
    12.     }
    13.     ul{
    14.         list-style: none;
    15.     }
    16.     #newsBox{
    17.         box-sizing: border-box;
    18.         margin:20px auto;
    19.         padding: 20px;
    20.         width:300px;
    21.         border: 2px solid lightblue;
    22.     }
    23.     #newsBox li{
    24.         line-height: 5opx;
    25.         border-bottom:1px dashed lightcoral;
    26.     }
    27.     #newsBox li:nth-last-child(1) {
    28.         border-bottom:none;
    29.     }
    30.     /* 基于css实现 */
    31.     /* #newsBox li:nth-child(even) {
    32.         background:lightgray;
    33.     }
    34.     #newsBox li:hover{
    35.         background: lightgreen;
    36.     } */
    37.     </style>
    38. </head>
    39. <body>
    40.     <ul id="newsBox">
    41.         <li>我是第1个LI</li>
    42.         <li>我是第2个LI</li>
    43.         <li>我是第3个LI</li>
    44.         <li>我是第4个LI</li>
    45.         <li>我是第5个LI</li>
    46.     </ul>
    47.     <script>
    48.     // 首先获取元素
    49.     let newsBox = document.getElementById('newsBox');
    50.     let newsList = newsBox.getElementsByTagName('li');
    52.     // 循环实现
    53.     for(let i = 0; i < newsList.length; i++) {
    54.         let curLi = newsList[i];
    55.         curLi.style.background = i % 2 === 0 ? '#fff' : '#ddd';
    56.     }
    57.     curLi.onmouseover = function () {
    58.         curLi.style.background = 'lightblue'
    59.     }
    60.     cruli.onmouseout = function () {
    61.         curLi.style.background = i % 2 === 0 ? '#fff' : '#ddd';
    62.     }
    63.     </script>
    64. </body>
    65. </html>