伪类选择器
CSS中的伪类选择器就是前面带有冒号(:)的选择器。举例来说，伪类选择器:first-child和:last-child可以分别从父元素中选择第一个和最后一个子元素。
另一个例子是:nth-child，它可以用于选择元素列表或HTML表格中属于同一行或同一列的元素。
代码实现
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2.伪类选择器</title>
<style>
div {
margin: 20px;
}
table {
border-collapse: collapse;
}
table tr td {
width: 100px;
height: 10px;
}
div table tr td:nth-child(2) {
width: 20px;
}
#container1 table tr td:nth-child(2) {
background-color: springgreen;
}
#container2 table tr:nth-child(2) td:nth-child(2) {
background-color: springgreen;
}
#container3 table tr:nth-child(2) {
background-color: springgreen;
}
#container4 table tr:nth-child(4) td:nth-child(4) {
background-color: springgreen;
}
#container5 table * {
background-color: springgreen;
}
</style>
</head>
<body>
<div id="container1">
<table border>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="container2">
<table border>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="container3">
<table border>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="container4">
<table border>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div id="container5">
<table border>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</body>
</html>页面效果
