<!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>

HTML系列：js和css多种方式实现隔行变色的更多相关文章

  1. js 创建对象的多种方式

    参考: javascript 高级程序设计第三版 工厂模式 12345678910 function (name) { var obj = new Object() obj.name = name o ...

  2. 基础2：js创建对象的多种方式

    js创建对象的多种方式 1. 工厂模式 function createPerson(name) { var o = new Object() 0.name = name return o } var ...

  3. CSS多种方式实现底部对齐

    CSS实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果: 效果说明: 1.红色区域数据需要倒排(即从底部开始数,数字为1.2.3.4.5),并且显示在最底部 2.当数据过多时需要显示滚动 ...

  4. yii 中引入js 和css 的方式

    在yii中 我们需要引入css 和 js 的时候,yii 自身有需要的类. 当我在views 视图层中引入css 和 js , <?php Yii::app()->clientScript ...

  5. js创建对象的多种方式及优缺点

    在js中,如果你想输入一个的信息,例如姓名,性别,年龄等,如果你用值类型来存储的话,那么你就必须要声明很多个变量才行,变量声明的多了的话,就会造成变量污染.所以最好的方式就是存储到对象中.下面能我就给 ...

  6. css多种方式实现等宽布局

    本文讲的等宽布局是在不手动设置元素宽度的情况下,使用纯css实现各个元素宽度都相当的效果. 1.使用table-cell实现(兼容ie8) <style> body,div{ margin ...

  7. CSS多种方式实现元素水平垂直居中

    html结构: <div class="center">确定宽高水平垂直居中</div> <div class="center2" ...

  8. css多种方式实现双飞翼布局

    圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...

  9. 点滴积累【JS】---JS小功能（列表页面隔行变色）

    效果: 代码: <head runat="server"> <title></title> <script type="text ...

随机推荐

  1. Codechef August Challenge 2019 Chef and Gordon Ramsay

    [传送门] 题目即求所有的三元组,相对大小关系同 $p_1,p_2,p_3$. 题解说都很清楚,这里写一下过程整理一下思路. 如果我们枚举中间这个元素,那么就是统计子树内外有多少个大于这个数和小于这个 ...

  2. Dubbo架构及原理

    1.Dubbo:Dubbo是一个分布式服务框架,SOA治理方案. 主要功能有:高性能的NIO通讯以及协议集成.服务动态寻址与路由.软负载均衡与容错.依赖分析与降级 主要特点: 连通性:provider ...

  3. websocket 浅学

    websocket ,可以实现客户端与服务器的即时通讯,比如即时聊天,获取项目中的消息提醒等(小铃铛上的标红数字提醒) 话不多说,上马奔腾,走起 只写demo,不在项目中使用: 1.初始化项目, np ...

  4. 51: Luogu 2485 模板

    $des$ 1.给定y.z.p,计算y^z mod p 的值: 2.给定y.z.p,计算满足xy ≡z(mod p)的最小非负整数x: 3.给定y.z.p,计算满足y^x ≡z(mod p)的最小非负 ...

  5. #Ubuntu 14.04 系统下载

    http://mirrors.aliyun.com/ubuntu-releases/14.04/

  6. Dice Similarity Coefficent vs. IoU Dice系数和IoU

    Dice Similarity Coefficent vs. IoU Several readers emailed regarding the segmentation performance of ...

  7. hosts 屏蔽广告 定位

    hosts 屏蔽广告 定位 JS Miner 挖矿 百度全家桶的全天候定位记录 各类统计服务(仅屏蔽 JS.不屏蔽控制台) 常见下载劫持 360 和百度的部分软件下载 CNNIC 根证书劫持 http ...

  8. js函数如何传递多个参数

    应用场景: 需要根据多个参数来判断该数据所属,从而达到删除或者修改的目的. 比如删除区域下的分组,一个区域可以用多个分组,不同的区域可以有相同的分组,那么如何识别对应的分组呢??? 可以在对应的数据操 ...

  9. AttributeError: 'Model' object has no attribute 'name'

    Traceback (most recent call last): File "<ipython-input-15-7fa9988e38ef>", line 1, i ...

  10. VS 点击页面自动定位到解决方案资源管理器目录位置

    点击工具→选项→项目和解决方案:勾上“在解决方案资源管理器中跟踪活动项”.