:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。

下面的例子, 设置表格的奇偶行背景颜色不同;单独设置表格的第1列背景颜色不同。

 <!DOCTYPE html>
<html>
<head>
<style type="text/css">
table{
height: 200px;
width:400px;
border:2px solid green;
} td{
border:1px solid;
} tr:nth-child(2n){
background:#00CCCC;
} tr td:nth-child(1){
background:#FFCCCC;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td>
</tr>
</table>
</body>
</html>

效果:

可以参考:

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

html table奇偶行颜色设置 (CSS选择器)的更多相关文章

  1. flex 4 datagrid 奇偶行颜色设置

    <s:DataGrid width="100%" height="100%" alternatingRowColors="[#ffFFff,#e ...

  2. table中嵌套table,如何用jquery来控制奇偶行颜色

    总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...

  3. table行颜色设置

    function renderingTable(obj){    $(obj).each(function(){        //设置奇数行颜色        $(this).find(" ...

  4. 如何修改antd中表格的表头样式和奇偶行颜色交替

    在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...

  5. jquery实现奇偶行赋值不同css值

    <html> <head> <title>jquery奇偶行css效果</title> <script src="../../jquer ...

  6. table奇偶行设置颜色代码

  7. 当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯CSS)

    <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...

  8. Gridview中奇偶数行颜色设置

    在gridview中的RowDataBound事件里面写 switch (e.Row.RowType) {case DataControlRowType.Header: e.Row.BackColor ...

  9. tab奇偶行颜色交替+插件

    (function($){ $.fn.tableUI=function(options){ var defaults={ evenRowclass:"evenRow", oddro ...

随机推荐

  1. rabbitmq学习(五) —— 路由

    绑定(Bindings) 在上一个教程中,我们已经使用过绑定.你可能会记得如下代码: channel.queueBind(queueName, EXCHANGE_NAME, "") ...

  2. 循序渐进学.Net Core Web Api开发系列【13】:中间件(Middleware)

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇介绍如 ...

  3. Python基础笔记(三)

    1. 循环与流程控制 (1) for myList1 = ["A", "B", "C", "D"] # 正序遍历 for ...

  4. 解决apache上访问 cgi脚本时总是在网页中显示出脚本的源代码而不是执行结果的问题

    apache是支持cgi脚本的,但是需要保证四个条件: 1.放置cgi脚本的文件夹本身需要对apache服务器这个用户(一般默认用户名是www,linux下的用户机制请自行百度)开放x(即可执行)权限 ...

  5. Codeforces Round #397 by Kaspersky Lab and Barcelona Bootcamp (Div. 1 + Div. 2 combined) E. Tree Folding 拓扑排序

    E. Tree Folding 题目连接: http://codeforces.com/contest/765/problem/E Description Vanya wants to minimiz ...

  6. java php c# 三种语言的AES加密互转

    java php c# 三种语言的AES加密互转 最近做的项目中有一个领取优惠券的功能,项目是用php写得,不得不佩服,php自带的方法简洁而又方便好用.项目是为平台为其他公司发放优惠券,结果很囧的是 ...

  7. j.u.c系列(04)---之AQS:同步状态的获取与释放

    写在前面 在前面提到过,AQS是构建Java同步组件的基础,我们期待它能够成为实现大部分同步需求的基础.AQS的设计模式采用的模板方法模式,子类通过继承的方式,实现它的抽象方法来管理同步状态,对于子类 ...

  8. Linux下Shell函数返回值实现种类

    shell在执行的时候是顺序执行的,也不存在什么多线程什么的. 一下是实现种类: 1.全局 g_result="" function testFunc() { g_result=' ...

  9. 【Go命令教程】4. go get

    hc@ubt:~$ go get github.com/hyper-carrot/go_lib/logging 命令 go get 可以根据要求和实际情况从互联网上下载或更新指定的代码包及其依赖包,并 ...

  10. DELPHI 常用虚拟键:VK_

    常数名称                          十六进制值          十进制值     对应按键 VK_LBUTTON                       01       ...