要用到的Css3选择器

element:nth-child(number){

}

选择器匹配属于其父元素的第 number 个子元素

  • 参数 Number
  1. odd 奇数
  2. even 偶数

W3School介绍:http://www.w3school.com.cn/cssref/selector_nth-child.asp

　　

完整demo:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>测试</title>

</head>

<style>

    #testtable tbody tr:nth-child(odd) {

        /* 匹配奇数行 */

        background-color: lightskyblue;

        color: black;

    }

    #testtable tbody tr:nth-child(even) {

        /* 匹配偶数行 */

        background-color: lightsalmon;

        color: white;

    }

</style>

<body>

    <table id="testtable" border="1" width="100%">

        <thead>

            <tr>

                <th colspan="3">标题</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>2</td>

                <td>3</td>

            </tr>

            <tr>

                <td>4</td>

                <td>5</td>

                <td>6</td>

            </tr>

            <tr>

                <td>7</td>

                <td>8</td>

                <td>9</td>

            </tr>

            <tr>

                <td>10</td>

                <td>11</td>

                <td>12</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

　　

利用CSS3选择器实现表格的斑马纹的更多相关文章

  1. 利用css3选择器及css3边框做出的特效(1)

    利用border-radius及box-shadow制作圆角表格 界面效果图如下: css样式如下所示: * { margin:; padding:; } body { padding: 40px 1 ...

  2. 利用CSS3选择器定制checkbox和radio

    之前在一个项目中需要定制checkbox,于是乎用图片模拟了一下,之后发现个更好用的方法(*因为兼容问题 在移动开发中用用就好) 效果: 1 2 3 4 5 6 7 实现代码: <style t ...

  3. CSS3选择器的研究，案例

    在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...

  4. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  5. css3常用方法以及css3选择器

    最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面   CSS3 边框   CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加 ...

  6. CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)

    使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...

  7. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  8. 总结30个CSS3选择器（转载）

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  9. 利用CSS3实现图片无间断轮播图的实现思路

    前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...

随机推荐

  1. ES6入门——变量的解构赋值

    1.数组的解构赋值 以前为变量复制,只能直接指定值.现在ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 本质上,这种写法属于模式匹配,只要等 ...

  2. 封装一个MPermissionsActivity的思路和步骤

    http://blog.csdn.net/longkehuawei/article/details/53202804 第一步:检测所有的权限是否都已授权 /** * 检测所有的权限是否都已授权 * * ...

  3. 第三篇：jvm之垃圾回收器

    一.Serial收集器 新生代收集器,在垃圾回收时,必须暂停其他所有的工作线程.即Stop-The-World. 评价:老而无用,食之无味,弃之可惜. 二.ParNew收集器 新生代收集器,seria ...

  4. Linux ->> UBuntu 14.04 LTE下设置静态IP地址

    UBuntu 14.04 LTE设置IP地址和一些服务器版本的Linux还不太一样.以Centos 7.0为例,网卡IP地址的配置文件应该是/etc/sysconfig/network-scripts ...

  5. cocos2d在IOS嵌入UM应用推荐

    因为cocos2d默认建立的项目,没用使用导航界面,所以如果直接导航到应用推荐页面将无法返回. 所以我做了一些修改: AppController.mm中 用导航界面包装一下默认的viewControl ...

  6. css z-index层重叠顺序

    一.z-index语法与结构 z-index 跟具体数字 如:div{z-index:100}注意:z-index的数值不跟单位. z-index的数字越高越靠前,并且值必须为整数和正数(正数的整数) ...

  7. Ubuntu查看版本信息

    关于查看Ubuntu的版本信息,我们会用到两个命令uname和cat. uname命令 这个命令用于显示系统信息.其参数为: -a 显示所有系统信息.其中包括机器名.操作系统名.内核名称等. 以下为执 ...

  8. 【深入理解JAVA虚拟机】第5部分.高效并发.1.Java内存模型与线程。

    1.概述 摩尔定律:描述处理器晶体管数量与运行效率之间的发展关系.Amdahl定律:通过系统中并行化与串行化的比重来描述多处理器系统能获得的运算加速能力. 从摩尔定律到Amdahl定律的转变,代表了近 ...

  9. HDU 5677 ztr loves substring（Manacher+dp+二进制分解）

    题目链接:HDU 5677 ztr loves substring 题意:有n个字符串,任选k个回文子串,问其长度之和能否等于L. 题解:用manacher算法求出所有回文子串的长度,并记录各长度回文 ...

  10. POJ-2429 GCD & LCM Inverse---给出gcd和lcm求原来两个数

    题目链接: https://cn.vjudge.net/problem/POJ-2429 题目大意: 给出两个数的gcd和lcm,求原来的这两个数(限定两数之和最小). 解题思路: 首先,知道gcd和 ...