使用：: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. Spring Bean装配详解（五）

    装配 Bean 的概述 前面已经介绍了 Spring IoC 的理念和设计,这一篇文章将介绍的是如何将自己开发的 Bean 装配到 Spring IoC 容器中. 大部分场景下,我们都会使用 Appl ...

  2. Word F1~F12 功能快捷键用法大全

    F1:帮助 在Word中使用F1功能键,可以获取帮助. F2:移动文字或图形 F2按键可以移动文字和图形.选中文本,按下F2,然后将光标定位到你想移动到的地方,按下回车,即可移动. F3 :自动图文集 ...

  3. Django 关联查询

    查询id=1的XXXXX关联的YYYYY信息 a = XXXXX.objects.get(id=1) a.YYYYY.all() 查询id=1的YYYYY关联的XXXXX信息 b = YYYYY.ob ...

  4. pandas中的argsort

    直接通过例子看比较好理解. import pandas as pd data = [[1, 2, 3], [2, 2, 2], [7, 8, 9]] df = pd.DataFrame(data, i ...

  5. GPIO输入—按键检测(开关控制小灯)

    本次的代码全是在上次代码之上添加的. 1.user下新建文件夹key,新建bsp_key.h bsp_key.c文件. 2.keil项目添加bsp_key.c,魔术棒C/C++中include pat ...

  6. Idea中一个服务按多个端口同时启动

    1.勾选并行启动 2.-Dserver.port=9018

  7. [yarn]yarn和npm的对比

    一.简介 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服 ...

  8. docker网络相关

    1.网卡有namespace的概念,不同的俩个namesp之间的网卡不能直接通信 为了俩个namespace的网卡相互通信,可以通过veth pair(一对)来实现.不同容器之间,便是通过veth p ...

  9. Tomcat服务器的数字证书 HTTPS 连接！

    SUN公司提供了制作证书的工具keytool, 在JDK 1.4以后的版本中都包含了这一工具,它的位置为\bin\keytool.exe 注意要使用一下 cmd命令,请确认jdk环境变量可以使用,可以 ...

  10. JS/js是什么？

    JavaScript 是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成: ECMAScript,由 ECMA-262 定义,提供核心语言功能; 文档对象模型(DOM),提供访问和操作网页 ...