<!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. oc语言的特征

    类型结构+运行时 内存管理:引用计数与析构 并发:gcd 函数式:block

  2. 金融类openapi

    股市URL解析 http://money.finance.sina.com.cn/moneyflow/?stockName=上证指数&symbol=sh000001&stockSymb ...

  3. Implementing the Singleton Pattern in C#

    Table of contents (for linking purposes...) Introduction Non-thread-safe version Simple thread safet ...

  4. LeetCode 1081. Smallest Subsequence of Distinct Characters

    原题链接在这里:https://leetcode.com/problems/smallest-subsequence-of-distinct-characters/ 题目: Return the le ...

  5. Edraw Max 9.4 Crack Method

    使用010editor修改以下两个文件. BaseCore.dll (修改二进制内容hex) Before C6 45 C8 62 C6 45 C9 64 C6 45 CA 65 C6 45 CB 6 ...

  6. haproxy 2.0 dataplaneapi rest api 几个方便的问题排查接口

    在使用haproxy 2.0 dataplaneapi的时候,刚开始的时候我们可能需要进行调试,保证我们的配置在我们的系统环境中 是可以使用的,以下是自己在当前学习中为了排查问题会使用的几个api 创 ...

  7. netflix conductor 2.x 版本新功能简单说明

    netflix conductor 2.x 已经发布很长时间了,同时官方也发布了关于2.x 新特性的说明,当前github 行的release 版本为2.14.4 新特性 grpc 框架支持 一个可选 ...

  8. [PHP]全国省市区信息，mysql数据库记录

    下载地址: https://files.cnblogs.com/files/wukong1688/T_Area.zip 或者也可以复制如下内容: CREATE TABLE IF NOT EXISTS ...

  9. 假设检验总结以及如何用python进行假设检验（scipy）

    几种常见的假设检验总结如下: 假设检验名称 Z检验 t检验 χ2检验 F检验 原假设 H0: μ≥μ0        H0: μ≤μ0        H0: μ=μ0  (比较样本和总体均值)     ...

  10. 【JZOJ6230】【20190625】梦批糼

    题目 一个$n\times m \times l $的立方体,有一些位置有障碍 一次操作会随机选择一个立方体,共有\(w\)次操作 询问所有操作都不选到障碍点,被选到至少一次的点的期望 $n ,m,l ...