使用：:nth-child 选择器


tr:nth-child(odd) {

    background-color: #ccc;

}

tr:nth-child(even) {

     background-color: #F9F9F9;

}

　　

odd 奇数行
even 偶数行

效果：
 

纯 css 控制隔行变色的更多相关文章

  1. js控制固定div和随屏滚动div兼容多浏览器和纯css控制（来自网络）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 纯CSS控制背景图片100%自适应填充布局

    https://blog.csdn.net/wd4java/article/details/50537562 解决:   html,body{height: 100%;width: 100%;marg ...

  3. 纯css控制文字2行显示多余部分隐藏

    在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...

  4. 纯css控制－表格表头固定,内容多时滚动内容

    <html> <head> <style type="text/css"> * { margin: 0; padding: 0; } /*所有内 ...

  5. 如何用纯 CSS 创作一个变色旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 ...

  6. 前端每日实战：81# 视频演示如何用纯 CSS 创作一个变色旋转动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ejZWKL 可交互视频 此视频是可 ...

  7. [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件

    隔行变色功能,不用js,直接用css伪类就可以做,这个实例可以作为js插件开发很好的入门级实例.本文实现的隔行变色包括以下功能: 1,支持2种常用结构共存( div元素 和 表格类型 ) 2,一个页面 ...

  8. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  9. 纯css实现长宽等比例的div

    现代网站页面基本都需要响应式,一个div的长宽往往我们都设置为百分之多少,这个百分之是相对于父容器动态计算的 这样在浏览器宽度变化之后,我们的元素也能自动更新长宽.例如:我们在页面上摆了一个div,这 ...

随机推荐

  1. WUSTOJ 1246: 字符串排序（Java）

    1246: 字符串排序 题目   输入n(n<100)个字符串,每个字符串长度不超过1000,将他们按字典顺序输出.更过内容点击标题. 分析   Java中的ArrayList()可以比较方便的 ...

  2. WUST 设计模式 实验九 观察者模式的应用

    实验九 观察者模式的应用 一.实验目的 掌握外观模式(Observer)的特点: 分析具体问题,使用外观模式进行设计. 二.实验内容和要求   网上商店中如果商品(product)在名称(name). ...

  3. go if 便捷语句

    之前使用java  C#没这么用过. 绝对新技能 if v := math.Pow(x, n); v < lim { 跟 for 一样,`if` 语句可以在条件之前执行一个简单的语句. 由这个语 ...

  4. 牛客 82E 无向图中的最短距离 (bitset,bfs)

    有一个n个点的无向图,有m次查询,每次查询给出一些(xi,yi) 令dist(x,y)表示x和y点在图中最短距离,dist(x,x)=0,如果x,y不连通则dist(x,y) = inf 每次查询图中 ...

  5. php底层源码之数组

    数组key和value的限制条件 <?php $arr = array( 1 => 'a', "1" => "b", 1.5 => &q ...

  6. C#常用数据结构

    常碰到的几种数据结构:Array,ArrayList,List,LinkedList,Queue,Stack,Dictionary<K,T>: 1.数组是最简单的数据结构.其具有如下特点: ...

  7. POJ1484(Blowing Fuses)--简单模拟

    题目链接:http://poj.org/problem?id=1484 这题直接简单模拟即可.给你n个容器,m个操作,最大容量C.模拟每一个对器件的开关操作.如果原来是关闭的,则打开,同时最大功耗加上 ...

  8. Go 接口使用

    本文来自:CSDN博客 感谢作者:fengfengdiandia 查看原文:go 接口 Go 语言不是一种 “传统” 的面向对象编程语言:它里面没有类和继承的概念. 但是 Go 语言里有非常灵活的接口 ...

  9. Python更改pip源

    Python更改pip源 pip源有以下 新版ubuntu要求使用https源,要注意.清华:https://pypi.tuna.tsinghua.edu.cn/simple阿里云:http://mi ...

  10. excel单元格数据与文本框数据同步

    Private Sub Worksheet_SelectionChange(ByVal Target As Range) ActiveSheet.Shapes().TextFrame2.TextRan ...