首页 > 试题广场 >

请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行

[问答题]
请写一个表格以及对应的CSS，使表格奇数行为白色背景，偶数行为灰色背景，鼠标移上去时为黄色背景。
查看答案及解析
添加回答
希希01头像 希希01
伪类选择器“:nth-child()” 。

语法： 

:nth-child(an+b)

为什么选择她，因为我认为，这个选择器是最多学问的一个了。很可惜，据我所测，目前能较好地支持她的只有Opera9+和Safari3+。

描述：

伪类:nth-child()的参数是an+b，如果按照w3.org上的描述，写成中文，很可能会让人头晕，再加上笔者的文笔水平有限，所以我决定避开an+b的说法，把它拆分成5种写法共5部分来说明。

第一种：简单数字序号写法

:nth-child(number)

直接匹配第number个元素。参数number必须为大于0的整数。

例子： 

li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种：倍数写法

:nth-child(an)

匹配所有倍数为a的元素。其中参数an中的字母n不可缺省，它是倍数写法的标志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种：倍数分组匹配

:nth-child(an+b) 与 :nth-child(an-b)

先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号，此时匹配组内的第a-b个。（其实an前面也可以是负号，但留给下一部分讲。）

例子：

li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/

li:nth-child(3n±0){background:orange;}/*相当于(3n)*/

li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四种：反向倍数分组匹配

:nth-child(-an+b)

此处一负一正，均不可缺省，否则无意义。这时与:nth-child(an+1)相似，都是匹配第1个，但不同的是它是倒着算的，从第b个开始往回算，所以它所匹配的最多也不会超过b个。

例子：

li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/

li:nth-child(-1n+8){background:orange;}/*或(-n+8)，匹配前8个（包括第8个）LI，这个较为实用点，用来限定前面N个匹配常会用到*/

第五种：奇偶匹配

:nth-child(odd) 与 :nth-child(even)

分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。

作者观点：表格奇偶数行定义样式就可以写成
.table > tr:nth-child(even) > td {background-color: #ccc;}  （偶数行）
.table > tr:nth-child( odd ) > td {background-color: #ccc;}  （奇数行）
参考：http://blog.csdn.net/wangjia200913/article/details/49615325
发表于 2016-12-08 15:04:15 回复(0)
Sumo头像 Sumo 
<table class="table">
  <tr><td>第一行</td></tr>
  <tr><td>第二行</td></tr>
  <tr><td>第三行</td></tr>
  <tr><td>第四行</td></tr>
</table>
 
<style>
  .table tr:nth-child(odd){
      background-color:white;
  }
  .table tr:nth-child(even){
      background-color:gray;
  }
  .table tr:hover{
      background-color:yellow;
  }
</style>
编辑于 2015-09-25 22:39:47 回复(11)
昔堇头像 昔堇
<style>
   tr>td {
       width: 100px;
       border: 1px solid;
   }
    tr:nth-child(2n){
        background-color: white;
    }
   tr:nth-child(2n+1){
        background-color: gray;
    }
    tr:hover{
        background-color: yellow;
    }
</style>
发表于 2015-08-30 22:08:25 回复(0)
charley头像 charley
<html>
  <head>
  <style type="text/css">
  tr  {border:1px solid black;}
  tr.b{background-color:#a9a9a9;}
  tr.a{background-color:#ffffff;}
  tr:hover{background-color:#ffcc00;}
  </style>
  </head>
  <body>
  <table>
  <tr class="a">
  <td>aa1</td>
  <td>aa2</td>
  <td>aa3</td>
  </tr>
  <tr class="b">
  <td>bb1</td>
  <td>bb2</td>
  <td>bb3</td>
  </tr>
  <tr class="a">
  <td>cc1</td>
  <td>cc2</td>
  <td>cc3</td>
  </tr>
  <tr class="b">
  <td>dd1</td>
  <td>dd2</td>
  <td>dd3</td>
  </tr>
  <tr class="a">
  <td>ee1</td>
  <td>ee2</td>
  <td>ee3</td>
  </tr>
  <tr class="b">
  <td>ff1</td>
  <td>ff2</td>
  <td>ff3</td>
  </tr>
  </table>
  </body>
</html>
发表于 2016-04-17 16:04:00 回复(0)
dara羽星头像 dara羽星
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 400px;
            height: 300px;
            text-align: center;
            border: 2px solid #000;
        }

        tr:nth-child(2n+1) {
            background-color: #fff;
        }

        tr:nth-child(2n) {
            background-color: #ccc;
        }

        td:hover {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>

</html>
发表于 2022-01-22 14:03:00 回复(0)
我爱小公举头像 我爱小公举
难道只有我用js来写？
发表于 2018-04-11 10:02:27 回复(0)
优雅1217头像 优雅1217
<style>
  table{
    background-color: #fff;
  }
  tr:nth-of-type(2n){
    background-color: grey;
  }
  
  tr:nth-of-type(2n):hover{
    background-color: yellow;
  }
</style>


<table border='1'>
  <tr>
     <th>姓名</th>
     <th>年龄</th>
  </tr>
  <tr>
     <td>grace</td>
     <td>18</td>
  </tr>
  <tr>
     <td>tom</td>
     <td>48</td>
  </tr>
</table>
发表于 2018-03-19 21:13:07 回复(0)
Month丶头像 Month丶 

	
	

		<!DOCTYPE html> 
	


	

		<html> 
	


	

		<head> 
	


	

		<title>问答题2</title> 
	


	

	

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	


	

		<style> 
	


	

		</style> 
	


	

		</head> 
	


	

		<body> 
	


	

		<table id="main" border="1px"> 
	


	

		<tr> 
	


	

		<td>1</td> 
	


	

		<td>1</td> 
	


	

		<td>1</td> 
	


	

		</tr> 
	


	

		<tr> 
	


	

		<td>2</td> 
	


	

		<td>2</td> 
	


	

		<td>2</td> 
	


	

		</tr> 
	


	

		<tr> 
	


	

		<td>3</td> 
	


	

		<td>3</td> 
	


	

		<td>3</td> 
	


	

		</tr> 
	


	

		<tr> 
	


	

		<td>4</td> 
	


	

		<td>4</td> 
	


	

		<td>4</td> 
	


	

		</tr> 
	


	

		<tr> 
	


	

		<td>5</td> 
	


	

		<td>5</td> 
	


	

		<td>5</td> 
	


	

		</tr> 
	


	

		<tr> 
	


	

		<td>6</td> 
	


	

		<td>6</td> 
	


	

		<td>6</td> 
	


	

		</tr> 
	


	

		<script> 
	


	

		$(function(){
	


	

		$("#main tr:even").css("background-color","gray");
	


	

		$("#main tr:odd").css("background-color","white");
	


	

		$("#main tr").mouseenter(function(){
	


	

		$(this).css("background-color","yellow");
	


	

		}).mouseleave(function(){
	


	

		$("#main tr:even").css("background-color","gray");
	


	

		$("#main tr:odd").css("background-color","white");
	


	

		})
	


	

		});
	


	

		</script> 
	


	

		</table> 
	


	

		</body> 
	


	

		</html>

发表于 2017-11-30 19:09:59 回复(0)
一只大恐龙头像 一只大恐龙 
tr{ background: grey; } tr:nth-child(2n){ background: white; } tr:hover{ background: yellow; }
发表于 2017-08-24 10:30:43 回复(0)
脱缰的哈士奇～头像 脱缰的哈士奇～ 
<table class="table">
	<thead>
	<tr>
		<th>ID</th>
		<th>Name</th>
		<th>Sex</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>001</td>
		<td>Tom</td>
		<td>F</td>
	</tr>
	<tr>
		<td>002</td>
		<td>Jim</td>
		<td>M</td>
	</tr>
	<tr>
		<td>003</td>
		<td>Peter</td>
		<td>F</td>
	</tr>
	</tbody>
</table>

.table{
	border: 1px solid #ccc;
	border-collapse: collapse;

}

.table td,.table th{
	border: 1px solid #ccc;
}


.table tr:nth-child(odd){
	background-color: white;
}

.table tr:nth-child(even){
	background-color: gray;
}
.table tr:hover{
	background-color: yellow;
}

发表于 2017-08-12 17:43:25 回复(0)
magicalLu1头像 magicalLu1 

	
	

		<!-- 倾斜一个表格以及对应的css，使表格奇数行为白色背景，偶数为灰色，鼠标移上去为黄色 -->
	


	

		<!DOCTYPE html>
	


	

		<html lang="en">
	


	

		<head>
	


	

		<meta charset="UTF-8">
	


	

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	


	

		<meta http-equiv="X-UA-Compatible" content="ie=edge">
	


	

		<title>Document</title>
	


	

		 <style>
	


	

		tbody tr:nth-child(odd) { background: #fff; }
	


	

		tbody tr:nth-child(even) { background: #eee; }
	


	

		tbody tr:hover { background: #fab646; }
	


	

		</style>
	


	

		</head>
	


	

		<body>
	


	

		<table>
	


	

		<thead>
	


	

		<th>
	


	

		NUMBER
	


	

		</th>
	


	

		</thead>
	


	

		<tbody>
	


	

		<tr>
	


	

		<td>ONE</td>
	


	

		</tr>
	


	

		<tr>
	


	

		<td>TWO</td>
	


	

		</tr>
	


	

		<tr>
	


	

		<td>THREE</td>
	


	

		</tr>
	


	

		<tr>
	


	

		<td>FOUR</td>
	


	

		</tr>
	


	

		<tr>
	


	

		<td>FIVE</td>
	


	

		</tr>
	


	

		</tbody>
	


	

		</table>
	


	

		</body>
	


	

		</html>

发表于 2017-07-22 15:46:32 回复(0)
美团内推助手头像 美团内推助手 
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style> table tr:nth-of-type(2n){ background-color: #ccc;} table tr:nth-of-type(2n+1){ background-color: #fff;} table tr:hover{ background-color: yellow;}
    </style>
</head>
<body>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>
</html>

发表于 2017-03-20 16:15:10 回复(0)
yxy3511头像 yxy3511 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style>

		#td{
			width:100%;
		}
		#td tr{
			width:80%;

		}
		#td tr:hover{
			background-color: yellow !important;
		}
	</style>
	
</head>
<body>
<table id="td">
	<tr><td>第一行</td></tr>
	<tr><td>第二行</td></tr>
	<tr><td>第三行</td></tr>
	<tr><td>第四行</td></tr>
</table>

<script>
	var tb = document.getElementById("td");
	var trs = tb.getElementsByTagName("tr");
	for(var i in trs){
		if(0 == i%2){
			console.log(trs[i])
			trs[i].style.backgroundColor = '#eee';
		}
	}


</script>
	
</body>
</html>

发表于 2017-03-04 14:25:05 回复(0)
BIG_DAN头像 BIG_DAN 
tr:nth-child(odd) {
    background-color: white;
}
tr:nth-child(even) {
    background-color: gray;
}
tr:hover {
    background-color: yellow;
}

发表于 2016-10-08 22:07:37 回复(0)
Emi、头像 Emi、
<style type="text/css">
tr:nth-child(odd){
background:white;
}
tr:nth-child(even){
background:grey;
}
</style>
<table>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
</table>
发表于 2016-09-08 21:49:52 回复(0)
一剪梅88头像 一剪梅88
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
tr:nth-child(2n){background: gray;}
tr:hover{background: yellow;}
</style>
</head>
<body>
<table border="1">
<tr><td>line1</td></tr>
<tr><td>line2</td></tr>
<tr><td>line3</td></tr>
<tr><td>line4</td></tr>
<tr><td>line5</td></tr>
<tr><td>line6</td></tr>
</table>
</body>
</html>

发表于 2016-09-07 18:21:19 回复(0)
「 初久℡」头像 「 初久℡」
<style>

table tr :nth-child ( odd ){ background :white ;}
table td :nth-child ( even ){ background :gray ; }
table tr : hover { background :yellow ;}
</style>
<table>
    <tr>
        <th>
        </th>
    </tr>
     <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>
发表于 2016-09-02 10:09:40 回复(0)
小吕头像 小吕 
    tr:nth-child(2n){
        background: white;  
    }
    tr:nth-child(2n):hover{
        background: yellow;
    }
    tr:nth-child(2n+1){
        background: grey;
    }

发表于 2016-08-28 17:40:58 回复(0)
lulin0816头像 lulin0816
Internet Explorer 不支持 :nth-child() 选择器。
发表于 2016-08-25 15:39:44 回复(0)
mzvast头像 mzvast
<!DOCTYPE html>
<html>
<head>
<title></title>
  <style type="text/css">
    *{
      border:solid red 1px;
    }
    tbody tr:nth-child(odd){
      background:white;
    }
    tbody tr:nth-child(even){
      background:grey;
    }
    tbody tr:hover{
      background:yellow;
    }
  </style>
</head>
<body>
<table>
<thead>
      <td>#</td>  
      <td>Value</td>  
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>hehe</td>
      </tr>
      <tr>
        <td>2</td>
        <td>hehe</td>
      </tr>
      <tr>
        <td>3</td>
        <td>hehe</td>
      </tr>
      <tr>
        <td>4</td>
        <td>hehe</td>
      </tr>
    </tbody>
</table>
</body>
</html>
发表于 2016-07-29 14:46:25 回复(0)
提交观点

问题信息

安卓工程师 前端工程师 阿里巴巴 Javascript 2016 HTML
来自：阿里巴巴2016前端开...
上传者：小小
难度：
32条回答 18639浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号