<!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. 第六次作业--static关键字、对象

    ##题目一 ##Computer package Train.Method.TeachDemo.Thread.Fuction; /** * 求n的阶乘算法 * @author 喵 * @date 20 ...

  2. pg_flame postgresql EXPLAIN ANALYZE 火焰图工具

    pg_flame 是golang 编写的一个将pg的EXPLAIN ANALYZE 转换为火焰图,使用简单 以下是一个简单的demo 环境准备 docker-compose 文件   version: ...

  3. ent 基本使用十四 edge

    edge 在ent 中属于比较核心,同时也是功能最强大的,ent 提供了比较强大的关系模型 快速使用 参考图 以上包含了两个通过边定义的关系 pets/owner: user   package sc ...

  4. rust crates 国内镜像加速配置

    rust 很不错,但是crates 经常下载有点慢,当前阿里云还没有相关的镜像,还有科大为我们提供了一个 配置方法 添加crates 配置 $HOME/.cargo/config 目录 [regist ...

  5. Vuejs发送Ajax请求

    一.概况 ①vuejs中没有内置任何ajax请求方法 ②在vue1.0版本,使用的插件 vue resource 来发送请求,支持promise ③在vue2.0版本,使用社区的一个第三方库 axio ...

  6. BigDecimal初始化不要用double类型

    在进行单价.总价相关的计算时,就会用到BigDecimal. 在初始化时,一个不小心,就可能给自己挖坑. 示例如下: public class BigDecimalInitTest { public ...

  7. vue中select设置默认选中

    vue中select设置默认选中 一.总结 一句话总结: 通过v-model来:select上v-model的值为option默认选中的那项的值(value) 二.select设置默认选中实例 < ...

  8. java wait方法

    wait方法是让当前线程等待,这里的当前线程不是指t,而是主线程. wait会释放锁,等到其他线程调用notify方法时再继续运行. 可以看下面的例子. 1 package com.citi.test ...

  9. 【深入学习linux】CentOS 7 最小化安装后的注意事项及一些必备组件的安装

    转载:https://blog.csdn.net/F_Srion/article/details/54910943 在VM虚拟机中安装CentOS 7 时 有时候顾虑到电脑硬件性能,我们需要最小化安装 ...

  10. 使用analyze命令统计信息

    ① 搜集和删除索引.表和簇的统计信息② 验证表.索引和簇的结构③ 鉴定表和簇和行迁移和行链接针对analyze的搜集和删除统计信息功能而言Oracle推荐使用DBMS_STATS包来代替analyze ...