: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. 使用 Maven 来管理项目 & 从 0 开始搭建 Maven 项目

    maven 是 apache 的一个开源软件,纯 Java 编写的,专门用于管理 Java 项目的一个工具. maven 就是一个工具而已,用不用都不耽误你刷刷的敲代码,那为什么我们还要学习它呢? 那 ...

  2. AI技术在智能海报设计中的应用

    背景 在视觉设计领域中,设计师们往往会因为一些简单需求付出相当多的时间,比如修改文案内容,设计简单的海报版式,针对不同机型.展位的多尺寸拓展等.这些工作需要耗费大量的时间.人力成本(5~6张/人日), ...

  3. collectionFramwork-1

    1. Set.List和Map可以看做集合的三大类. List集合是有序集合,集合中的元素可以重复,访问集合中的元素可以根据元素的索引来访问. Set集合是无序集合,集合中的元素不可以重复,访问集合中 ...

  4. JVM简介堆中新生代老年代浅析

    一.JVM内存结构由程序计数器.堆.栈.本地方法栈.方法区等部分组成.1)程序计数器 几乎不占有内存.用于取下一条执行的指令.2)堆 所有通过new创建的对象的内存都在堆中分配,其大小可以通过-Xmx ...

  5. 暴力探测蓝牙设备工具redfang

    暴力探测蓝牙设备工具redfang   根据是否可以被扫描到,蓝牙设备具有可见(Disoverable)和不可见(non discoverable)两种模式.为了扫描不可见蓝牙设备,Kali Linu ...

  6. HTTP协议-缓存

    HTTP 协议中,缓存更多关心的文档资源的再利用.其目的是减少数据传输,加快相应速度等等.而对于缓存采用的是什么方案,也就是存在内存中还是硬盘中之类的问题,就属于另外的内容了. 假设,我身在广东,但是 ...

  7. android activity 启动模式

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 1,标准的, 2,单个 顶部 3,单个 任务 4,单个 实例 标准的 就是 每启动一次这 ...

  8. hdu 4612 边双联通 ***

    题意:有N 个点,M条边,加一条边,求割边最少.(有重边) 链接:点我 先求双连通分量,缩点形成一个生成树,然后求这个的直径,割边-直径即是答案 #pragma comment(linker, &qu ...

  9. js的sort()方法

    说明 如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序.要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较. arra ...

  10. BZOJ2888 : 资源运输

    显然资源集合处就是树的重心,这题需要动态维护树的重心. 每个连通块以重心为根,用link-cut tree维护每个点的子树大小以及子树内所有点到它的距离和. 合并两个连通块时,考虑启发式合并,暴力往大 ...