: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. 
						
  2. table中嵌套table，如何用jquery来控制奇偶行颜色
		
    总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...
    
		
    3. 
						
  3. table行颜色设置
		
    function renderingTable(obj){    $(obj).each(function(){        //设置奇数行颜色        $(this).find(" ...
    
		
    4. 
						
  4. 如何修改antd中表格的表头样式和奇偶行颜色交替
		
    在做antd表格时通常会用到table组件,但是table的表头时给定的,那么怎么修改表头的颜色呢? 这里用的时less的写法,在全局环境中写,所有的table表头都会变成自己定义的颜色 定义好表头的 ...
    
		
    5. 
						
  5. jquery实现奇偶行赋值不同css值
		
    <html> <head> <title>jquery奇偶行css效果</title> <script src="../../jquer ...
    
		
    6. 
						
  6. table奇偶行设置颜色代码
		
    
		
    7. 
						
  7. 当鼠标经过表格数据行时颜色不同且奇偶行颜色也不同 (纯CSS)
		
    <!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Prope ...
    
		
    8. 
						
  8. Gridview中奇偶数行颜色设置
		
    在gridview中的RowDataBound事件里面写 switch (e.Row.RowType) {case DataControlRowType.Header: e.Row.BackColor ...
    
		
    9. 
						
  9. tab奇偶行颜色交替+插件
		
    (function($){ $.fn.tableUI=function(options){ var defaults={ evenRowclass:"evenRow", oddro ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JAVA 画图板实现（基本画图功能+界面UI）二、功能实现及重绘实现
			
    上篇博客中介绍了界面的实现方法,在这篇博客中将对每个按钮的功能的实现进行讲解并介绍重绘 首先肯定要添加事件监听机制了,那么问题来了,事件源对象是谁?需要添加什么方法?事件接口是什么? 1.我们需要点击 ...
    
			
    2. 
						
  2. JDK1.8快速入门
			
    JDK8提供了非常多的便捷用法和语法糖,其编码效率几乎接近于C#开发,maven则是java目前为止最赞的jar包管理和build工具,这两部分内容都不算多,就合并到一起了. 愿编写java代码的过程 ...
    
			
    3. 
						
  3. UOJ.179.线性规划(单纯形)
			
    题目链接 这写得还不错:http://www.cnblogs.com/zzqsblog/p/5457091.html 引入基变量\(x_{i+n}\),将约束\(\sum_{i=1}^m a_{ij} ...
    
			
    4. 
						
  4. BZOJ.1003.[ZJOI2006]物流运输(DP 最短路Dijkstra)
			
    题目链接 容易看出是个最短路+DP.既然答案和天数有关,那么就令\(f[i]\)表示前\(i\)天最小成本. 这个转移很好想: \(f[i]=\min(f[i],\ f[j]+cost(j+1,i)+ ...
    
			
    5. 
						
  5. js跨域请求（jsonp）
			
    jsonp是跨域请求的手段之一. jsonp的原理: 先来看看下面这段代码 <!DOCTYPE html> <html lang="en"> <hea ...
    
			
    6. 
						
  6. ROS知识（23）——行为树Behavio  Tree原理
			
    机器人的复杂行为的控制结构CA(Contrl Architecture)通常使用有限状态机来实现,例如ROS提供的smach.行为树是另外一种实现机器人控制的方法,ROS下代表的开源库有pi_tree ...
    
			
    7. 
						
  7. 国外IOS UI指南
			
    国外IOS UI指南 众所周知,IOS的界面设计,越来越流行,可以说都形成了一个标准,搜集了一些资料,供自己以后学习使用! iOS Human Interface Guidelines (中文翻译)  ...
    
			
    8. 
						
  8. ftp通用类2
			
    using System; using System.Net; using System.IO; using System.Text; using System.Net.Sockets; /// &l ...
    
			
    9. 
						
  9. JVM菜鸟进阶高手之路
			
    http://www.jianshu.com/u/3def157aab07?utm_medium=note-author-link&utm_source=mobile
    
			
    10. 
						
  10. Revit API创建几何实体Solid并找到与之相交的元素
			
    几何实体的创建方法之一:构成封闭底面,指定拉伸方向与拉伸高度.GeometryCreationUtilities ;         , pt.Y - dBoxLength / , pt.Z);    ...
    
			
    11.