: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. JSONObject 自定义过滤配置

    一.自定义过滤器说明 PropertyPreFilter 根据PropertyName判断是否序列化  PropertyFilter 根据PropertyName和PropertyValue来判断是否 ...

  2. Android-认识Service

    Android-认识Service 学习自 郭霖的博客 https://developer.android.google.cn/reference/android/app/Service#WhatIs ...

  3. python语法(五)—函数

    前面几天学习了python的基础语法,判断,循环,以及文件操作等等内容,对python也是有了一个认识.今天开始学习python的函数和模块. 函数 函数是什么?我的理解就是,他和java中的方法是一 ...

  4. 关于dubbo服务的xml配置文件报错的问题

    在配置dubbo服务的过程中,经常会遇到虽然程序能够跑起来,但是配置文件一堆红叉,虽然不影响功能,但是确实很让人恶心. 报错信息如下: Multiple annotations found at th ...

  5. 【BZOJ-4212】神牛的养成计划 Trie树 + 可持久化Trie树

    4212: 神牛的养成计划 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 136  Solved: 27[Submit][Status][Discus ...

  6. Xtreme9.0 - Light Gremlins 容斥

    Xtreme9.0 - Light Gremlins 题目连接: https://www.hackerrank.com/contests/ieeextreme-challenges/challenge ...

  7. 使用清华源和阿里源替代Ubuntu源

    sudo nano /etc/apt/source.list 替换为如下文本 # 默认注释了源码镜像以提高 apt update 速度,如有需要可自行取消注释 deb https://mirrors. ...

  8. spring boot 集成 shiro

    写在前面 1.Shiro是Apache下的一个开源项目,我们称之为Apache Shiro.它是一个很易用与Java项目的的安全框架,提供了认证.授权.加密.会话管理,与spring Security ...

  9. High accuracy voltage regulator

    High accuracy voltage regulator Good morning everybody, I want to make a accurate voltage regulator ...

  10. Revit API找到风管穿过的墙(当前文档和链接文档)

    start [Transaction(TransactionMode.Manual)] [Regeneration(RegenerationOption.Manual)] public class c ...