要求:
<!--通过设置表格颜色来练习一下结构化伪类-->
<!--表格中tbody,首行和尾行为不同颜色 中间部分两色交替-->
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!--通过设置表格颜色来练习一下结构化伪类-->
<!--表格中tbody,首行和尾行为不同颜色 中间部分两色交替-->
<link rel="stylesheet" href="demo_tableColor.css">
</head>
<body>
<div id="wrap">
<table id="myTable" border="1" cellspacing="0" cellpadding="2">
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>年龄</td>
<td>备注</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>zhangsan</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>12</td>
<td>zhangsan</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>zhangsan</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>zhangsan</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>zhangsan</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>zhangsan</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>zhangsan</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>zhangsan</td>
<td>12</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
css:
*{
margin: 0px;
padding:0px;
box-sizing: border-box;
}
#wrap{
position: relative;
top: 20px;
left: 20px;
}
#myTable{
width: 900px;
border:1px solid #e6e6e6;
}
td{
padding: 10px 20px;
border-left: transparent;
border-right: transparent;
border-top: transparent;
}
tbody :nth-child(odd) td{
background-color: #d9534f;
}
tbody :nth-child(even) td{
background-color: #eea236;
}
tbody :first-child td{
background-color: #bce8f1;
}
tbody :last-child td{
background-color: #67b168;
}