使用::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. Python 【爬虫】

    爬虫的工作原理 首先,爬虫可以模拟浏览器去向服务器发出请求: 其次,等服务器响应后,爬虫程序还可以代替浏览器帮我们解析数据: 接着,爬虫可以根据我们设定的规则批量提取相关数据,而不需要我们去手动提取: ...

  2. STM32的I2C通讯过程

    使用I2C外设通讯时,在通讯的不同阶段它会对“状态寄存器(SR1 及SR2)”的不同数据位写入参数,通过读取这些寄存器标志来了解通讯状态. 1.主发送器 可使用STM32标准库函数来直接检测这些事件的 ...

  3. 导入别的项目到我的eclipse上出现红色感叹号问题

        项目红色感叹号问题问题 一般我们在导入别的项目到我的eclipse上面会发现,项目上面有红色的错误     原因 因为我电脑上的 jdk版本和别人电脑jdk版本不一样,那么对于的jre版本也不 ...

  4. rman备份跳过read only数据文件,减少备份总量,加快备份时间

    客户需求,RMAN备份时间过长,想缩短备份时间,优化备份. 客户基于表空间进行历史数据归档的方式,将历史的表空间进行read only,想让RMAN跳过只读表空间,减少RMAN备份的数据总量,从而缩短 ...

  5. dg环境连接ORA-00604,ORA-16000: database open for read-only access

    报错信息 根据客户提供的报错信息, ORA-: error occurred at recursive SQL level ORA-: database open for read-only acce ...

  6. java 框架-企业级搜索 Solr

    https://blog.csdn.net/cs_hnu_scw/article/details/79388080 一:Solr简介       Solr是一个独立的企业级搜索应用服务器,它对外提供类 ...

  7. Css制作table细线表格

    制作细线表格,我想应该是最基本的css知识了,记录下来巩固下. 推荐: table{ border-collapse:collapse; border: 1px solid #000000; } td ...

  8. ajax简单页面

    简单的注册页面运用ajax 主页面 <head><meta http-equiv="Content-Type" content="text/html; ...

  9. ionic 局部刷新

    $scope.$on('$ionicView.beforeEnter', console.log("刷新"); })

  10. 负载均衡之haproxy负载均衡算法及haproxy的工作模式

    haproxy负载均衡的算法有如下7种: .roundrobin : 基于权重轮循. static-rr : 基于权重轮循.静态算法,运行时改变无法生效 source : 基于请求源IP的算法.对请求 ...