<!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. （知识点4）C++ 中vector

    1.定义vector<vector<int>> M; 2.添加元素这里是vector的嵌套使用,本质是vector元素里的每个元素也是vector类型,所以抓住本质来添加元素就 ...

  2. kuma kong 团队开发的可视化&&安全的service mesh

    最近service mesh 的开源产品是越来越多了,好多团队都开源了自己的解决方案 maesh 最近kong 团队也开源了自己的service meshkuma 一张参考图 说明 kuma 没有基于 ...

  3. Xml解析作业与Xml建模andXml建模作业

    作业:config.xml解析 1.获取所有action中的type的值 public static void main(String[] args) throws Exception { Input ...

  4. C++中list的用法总结

    list简介 list 也是顺序容器的一种.只是list 是一个双向链表.使用 list 需要包含头文件 list.双向链表的每个元素中都有一个指针指向后一个元素,也有一个指针指向前一个元素,如下图所 ...

  5. OpenVSwitch实验参考

    1. 使用Floodlight管理OVS桥 (1) 下载:https://codeload.github.com/floodlight/floodlight/tar.gz/v1.2 (2) tar x ...

  6. Centos pip 安装uwsgi 报错“fatal error: Python.h: No such file or directory”

    解决方法: 安装python-devel即可,注意,不是python-dev yum -y install python-devel

  7. xss、SQL测试用例小结

    xss测试用例小结: <script>alert("跨站")</script> (最常用)<img scr=javascript:alert(&quo ...

  8. shell for 循环演示

    test.sh #!/bin/bash for skill in Ada Coffe Action Java; do echo "I am good at ${skill}Script&qu ...

  9. mfs分布式文件系统，分布式存储，高可用（pacemaker+corosync+pcs），磁盘共享（iscsi），fence解决脑裂问题

    一.MFS概述 MooseFS是一个分布式存储的框架,其具有如下特性:(1)通用文件系统,不需要修改上层应用就可以使用(那些需要专门api的dfs很麻烦!).(2)可以在线扩容,体系架构可伸缩性极强. ...

  10. python之turtle使用：画一颗美美哒的树

    关于工具介绍这里小生就不赘述了,这里附上个人觉得最详细的文档地址:https://docs.python.org/zh-cn/3/library/turtle.html?highlight=turtl ...