<!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. 关于ArrayList

    List概述 List是一个列表结构抽象定义,有序的,可对其中每个元素的插入位置进行精确地控制,可以通过索引来访问元素,遍历元素.包括函数的有:添加元素,删除元素,判断是否包含元素等等重要函数.   ...

  2. router.beforeEach、路由元信息、导航守卫与函数式编程

    一.函数的识别: 1.router.beforeEach:主函数.高阶函数.入口函数: 2.匿名参量函数:处理跳转过程中的附加逻辑 (to, from, next) => { if (to.ma ...

  3. Opentrains 1519 G——最小圆覆盖

    题目 给出 $n$ 个定义在区间 $[0, 1]$ 上的一次函数 $f_i(x) = a_ix+b_i$,定义两个函数的距离为: $$dist(f,g) = \left(\max_{0\leq i\l ...

  4. Colorful events

  5. Xcode 创建.a和framework静态库(转)

    最近因为项目中的聊天SDK,需要封装成静态库,所以实践了一下创建静态库的步骤,做下记录. 库介绍 库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种.iOS中的静 ...

  6. PipelineWise illustrates the power of Singer

    转自:https://www.stitchdata.com/blog/pipelinewise-singer/ Stitch is based on Singer, an open source st ...

  7. GoCN每日新闻(2019-11-08)

    GoCN每日新闻(2019-11-08) GoCN每日新闻(2019-11-08) 1. Go Modules: v2及更高版本使用 https://blog.golang.org/v2-go-mod ...

  8. linux 线程查看 和 Jvm栈线程ID对应

    一.proc查看进程和线程 该方法是个人最为推荐,也最喜欢的一种方法.进程文件下,有几种方式可以获取目前进程开启的进程数. 查看status文件: # cat /proc//status Name: ...

  9. visual studio 2019 企业版下载

    由于visual studio从2017开始就是网络下载安装,所以网速慢的朋友安装上就存在时间感,所以笔者在百度云上提供了visual studio 2019的下载包.需要的朋友自己下载安装.不过,2 ...

  10. Dubbo自定义Filter统一处理异常

    Dubbo版本:2.7 使用自定义Filter注意事项 1.自定义名称不能和默认Filter相同,否则可能不生效 2.只用定义Filter类和META-INF下的文本文件,不用添加配置,@Activa ...