使用：: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. jenkins sonarqube 代码检测

    #jenkins插件: SonarQube Scanner #Jenkins配置 Task to run:scan #Analysis properties: sonar.projectKey=ser ...

  2. 1267: 展开字符串（Java）

    WUSTOJ 1267: 展开字符串 参考 jamesMusk的博客--Java 判断字符是大写小写或者数字 Description   给三个参数a1,a2,a3和一个字符串,请按以下要求展开该字符 ...

  3. python __enter__ 与 __exit__的作用，以及与 with 语句的关系（转）

    https://blog.csdn.net/xc_zhou/article/details/80810111 python __enter__ 与 __exit__的作用,以及与 with 语句的关系

  4. 怎样在网页中嵌入JS代码

    有四种方法: 方法1: 在<script>标签内直接写代码 <body> <button id="btn">click</button&g ...

  5. 取代Ajax.BeginForm的ajax使用方法

    原文:取代Ajax.BeginForm的ajax使用方法 一.前提概要 Asp.net core中已经取消了Ajax.BeginForm,也不会计划出ajax tag helper,所以得利用插件jq ...

  6. Vue2.0+elementUI使用echarts插件

    1.npm安装echarts:     $ npm install echarts -S 2.html代码: <template> <div id="chartColumn ...

  7. Python 多进程拷贝文件夹案例

    import os import multiprocessing def copy_file(q, file_name, old_folder_name, new_folder_name): &quo ...

  8. navicat 控制mysql某个数据库只属于某个用户

    1.使用navicat 1)首先使用root用户新建连接 2)新建mysql用户 3)点击权限,选择添加权限,出现MySQL中已存在的数据库列表,选择你要为该新建用户开放的数据库,此处选择“maiba ...

  9. Image Processing and Analysis_15_Image Registration：Image registration methods a survey——2003

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  10. Computer Vision_18_Image Stitching： Image Alignment and Stitching A Tutorial——2006（book）

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...