CSS系列： css和js隔行变色（.box li:nth-of-type属性）

最新推荐文章于 2021-06-19 02:12:04 发布

公子清

最新推荐文章于 2021-06-19 02:12:04 发布

阅读量499

点赞数

分类专栏： CSS系列 js系列文章标签： css3与js隔行变色 nth-of-type属性

本文链接：https://blog.csdn.net/Josiah_Yuan/article/details/103464329

版权

js系列同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

CSS系列

3 篇文章 0 订阅

订阅专栏

两种方式让css隔行变色js和css3属性.box li:nth-of-type

  <!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;
        /* 通配符，表示所有标签元素。margin:auto表示横竖都居中，margin: 0 auto表示横居中，竖不居中； */
       }
       ul, ol {
            list-style:none; 
          /* 去列表点 */
       }
       .box {
          margin:20px auto;  
          /* 上下外边距20px,左右自动 */
          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>

运行效果如下：

公子清

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS系列： css和js隔行变色（.box li:nth-of-type属性）

两种方式让css隔行变色js和css3属性.box li:nth-of-type <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> ...
复制链接

扫一扫