首页
登录 | 注册

利用CSS3选择器实现表格的斑马纹

要用到的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选择器实现表格的斑马纹

 


相关文章

  • 问题引入 在ASP.NET Core - 依赖注入这篇文章里面,我们知道了如何利用ASP.NET Core原生的容器来实现依赖注入的,那我们为什么要替换掉默认的 IoC容器呢?从ASP.NET Core - 依赖注入这篇文章来看的话,默认的 ...
  • More Effective C++
    More Effective C++ 35个改善编程与设计的有效方法 只有深入了解C++编译器如何解释代码, 才有可能用C++语言写出健壮的软件. C++的难学, 不仅在其广博的语法, 语法背后的语义, 语义背后的深层思维, 深层思维背后的 ...
  • 补习系列(20)-大话 WebSocket 与 &quot;尬聊&quot;的实现
    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...
  • 《k8s 源码分析》- Custom Controller 之 Informer
    Custom Controller 之 Informer 概述 架构概览 reflector - List & Watch API Server Reflector 对象 ListAndWatch watchHandler - ad ...
  • 依赖注入容器-- Autofac
    目录: 一.简介 二.如何使用 2.1.基本使用 2.2.接口使用 2.3. 其他注入 2.4. 注入的生命周期   一.简介 在上一篇文章中讲到替换默认服务容器,我们选择了Autofac Autofac---Autofac是一款IOC框架 ...
  • 一.前言 在日常开发中,我们经常会碰到需要在运行时才知道对象个数的情况,这种情况不能使用数组,因为数组是固定数量的,这个时候我们就会使用集合,因为集合可以存储数量不确定的对象. 集合类是特别有用的工具类,不仅可以存储数量不等的对象,还可以实 ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.073 s.
京ICP备10005923号