伪类选择器
CSS中的伪类选择器就是前面带有冒号(:)的选择器。举例来说，伪类选择器:first-child和:last-child可以分别从父元素中选择第一个和最后一个子元素。
另一个例子是:nth-child，它可以用于选择元素列表或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>页面效果
