: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. [转]c++优先队列(priority_queue)用法详解
			
    既然是队列那么先要包含头文件#include <queue>, 他和queue不同的就在于我们可以自定义其中数据的优先级, 让优先级高的排在队列前面,优先出队 优先队列具有队列的所有特性, ...
    
			
    2. 
						
  2. C# SqlHerper
			
    1.C# SqlHelper public static class SqlHelper { private static readonly string conStr = Configuration ...
    
			
    3. 
						
  3. 反编译APK文件的三种方法(转)
			
    因为学习Android编程的需要,有时我们需要对网络上发布的应用项目进行学习,可是Android项目一般是通过APK文件进行发布的,我们看不到源代码,嘿嘿,办法总会有的,而且不止一个... ps:对于 ...
    
			
    4. 
						
  4. 用css解决table文字溢出控制td显示字数(转)
			
    场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...
    
			
    5. 
						
  5. HDU 4747 Mex （2013杭州网络赛1010题，线段树）
			
    Mex Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total Submis ...
    
			
    6. 
						
  6. Spartan6 slave SelectMap configuration fails owing to JTAG?
			
    http://forums.xilinx.com/t5/Configuration/Spartan6-slave-SelectMap-configuration-fails-owing-to-JTAG ...
    
			
    7. 
						
  7. centos中安装tomcat6
			
    在centos中安装tomcat6   1)通过yum自动安装tomcat和dependences root@Centos_AAA ~]# yum install tomcat6 [root@Cent ...
    
			
    8. 
						
  8. linux-socket connect阻塞和非阻塞模式 示例
			
    ~/cpp$ ./connect 192.168.1.234 1234 kkkk block mode:  ubuntu 14.04 : time used:21.0.001053s connect  ...
    
			
    9. 
						
  9. 给第三方dll强签名
			
    假若我们要对第三方控件或者是其他的没有源代码的DLL文件想做类似的处理,增加强名称签名,怎么处理,是很多人都会面对的问题.     步骤: 1.首先采用反汇编工具ildasm生成中间语言. ildas ...
    
			
    10. 
						
  10. AngularJS路由系列(4)-- UI-Router的$state服务、路由事件、获取路由参数
			
    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● UI-Router的$state服务● UI-Router的路由事件● UI-Router获取路由参数 Angular ...
    
			
    11.