使用::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. 使ssh记住密码

    前面介绍过Conemu , Msys2工具,提升了windows本地文件操作的效率,但使用ssh时候,总需要重新输入密码,不能像SercurityCRT等工具记住密码,使用时不是很爽快. 其实通过ss ...

  2. 去掉右键Open Folderas Intellij IDEA Project

    解决: WIN+R键打开运行,输入regedit 打开注册表 在地址栏输入: 计算机\HKEY_CLASSES_ROOT\Directory\Background\shell\Powershell 然 ...

  3. @Adaptive注解

    关于@Adaptive注解 引用dubbo官方文档的一段话: ​ Adaptive 可注解在类或方法上.当 Adaptive 注解在类上时,Dubbo 不会为该类生成代理类.注解在方法(接口方法)上时 ...

  4. 03 HttpServletRequest_HttpServletResponse

    HttpServletRequest:一次来自客户端的请求的相关信息 请求行 request.getMethod() 获取http请求方式 request.getRequestURI() 获取统一资源 ...

  5. 深度剖析Kubernetes API Server三部曲 - part 1

    欢迎来到深入学习Kubernetes API Server的系列文章,在本系列文章中我们将深入的探究Kubernetes API Server的相关实现.如果你对Kubernetes 的内部实现机制比 ...

  6. uboot 添加自定义命令

    ref : https://www.cnblogs.com/FREMONT/p/9824226.html 1.添加命令 1.1在common目录下,新建一个cmd_xx.c, 需要添加的命令格式为: ...

  7. 阿里云kubernetes集群被xmrig挖矿程序入侵

    原因是由于Kubernetes Apiserver不安全配置所致,Apiserver提供了资源操作的唯一入口,并提供认证.授权.访问控制.API注册和发现等机制,所以apiserver的安全至关重要. ...

  8. CSS3中三种清除浮动(float)影响的方式

    float是HTML中布局的一大关键,很多难题一旦用上float都能很愉快地解决.但是凡是好用的,也容易出错.比如当子元素都为float时,其父元素会受影响,或者偶尔会发现自己某个div的高度变成了0 ...

  9. (六)Hibernate的增删改查操作(3)

    一.在Hibernate中使用原生SQL语句 sql语句面向的是数据库,所以sql语句中对应的不再是bean了,比如sql="select * from user"   在hql中 ...

  10. FlowPortal BPM多汇报线的设置及使用

    1.在组织结构中设置多汇报线 2.流程中使用汇报线 3.流程节点上使用汇报线 流程节点默认启用流程中指定的汇报线,若流程中的某个节点需要启用特殊的汇报线,可通过设置节点业务属性实现.