使用：: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. Struts2连接Mysql的Crud使用

    今天分享的是struts2框架中增删改查的用法: 一:利用Struts2框架 1.1在pom.xml中导入相关依赖 <project xmlns="http://maven.apach ...

  2. 微信小程序页面滚动到指定位置

    页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selec ...

  3. deferred.promise.then().then()异步链式操作(Chain operation)

    //deferred.promise.then().then() deferred.promise.then(function () { console.log('1 resolve'); retur ...

  4. SQL 不同服务器数据库操作

    https://www.cnblogs.com/lusunqing/p/3660190.html --创建远程链接服务器 execute sys.sp_addlinkedserver @server= ...

  5. 解决IE8中select下拉列表文字上下不居中的问题

    对IE8及以下的浏览器设置padding属性,其他浏览器则设置line-height 属性

  6. K2 BPM_携手捷普：让流程立于云端，臻于至上_全球领先的工作流引擎

    在工业4.0地催化下,新一代信息技术与高科制造业深度融合,正在引发影响深远的产业变革,形成了新的生产方式.产业形态.商业模式和经济增长点. 捷普作为世界上最大型的电子制造服务公司之一,正站在新的历史发 ...

  7. stm32F1 DMA

    DMA,全称是Direct Memory Access,中文意思为直接存储器访问 DMA可用于实现外设与存储器之间或者存储器与存储器之间数据传输的高效性 DMA请求映像 各通道的DMA1请求: 各通道 ...

  8. Linux常用命令及文件管理

    Linux上的文件管理类命令都有哪些,其常用的使用方法及其相关示例演示. 目录解释: .代表此层目录:  .. 代表父目录:-代表前一个目录:~代表是家目录. (1)ls命令(显示) -a:列出所有文 ...

  9. CSS复合选择器和div盒子模型

    一.复合选择器(3种) 1.交集复合选择器 特点:由2个选择器组成,其中第一个必须是标签选择器,第二个是类或id选择器.两个选择器之间没有空格(有空格属于层级选择器) <h3 class=&qu ...

  10. Linux学习笔记（九）shell基础：echo、命令别名和常用快捷键

    一.echo在屏幕上打印内容 echo [选项] [输出内容] -e 支持转义字符控制的字符转换 输出带颜色的文本 二.第一个脚本 编写脚本 注意: #!/bin/bash 此行不是注释,必须有 #! ...