<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<style type=”text/css”>
table{
border-collapse: collapse;/*边框一条线，默认两条*/
font-size: 75%;
line-height: 1.4;
border: solid 2px #ccc;/*实线*/
width: 600px;
}
th,td{
padding: .3em .5em;
cursor: pointer;/*鼠标移到上面时是手性*/
}
th{
font-weight: normal;
text-align: left;
padding-left: 15px;
}
td:only-of-type{
font-weight: bold;
color: #444;
}
tbody th:not(.end){
background: skyblue;
padding-left: 26px;
}
tbody th.end{
background: silver;
padding-left: 26px;
}
thead th{
background: #c6ceda;
border-color: #fff #fff #888 #fff;
border-style: solid;
border-width: 1px 1px 2px 1px;
padding-left: .5em;
}
tbody tr:nth-child(2n){
background: #fef;
}
tbody tr:hover{
background: #fbf;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>编号</th>
<th>伪类表达式</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr><td colspan=”3″>简单的结构伪类</td></tr>
<tr><th>1</th><td>:first-child</td><td>选择拥有父级的，且在该父级里排第一的元素</td></tr>
<tr><th>2</th><td>:last-child</td><td>选择拥有父级的，且在该父级里排最后的元素</td></tr>
<tr><th>3</th><td>:first-of-type</td><td>选择拥有父级的，且在该父级里第一种该元素</td></tr>
<tr><th>4</th><td>:last-of-type</td><td>选择拥有父级的，且在该父级里最后一种该元素</td></tr>
<tr><th>5</th><td>:only-child</td><td>选择拥有父级的，且在父级里仅有的</td></tr>
<tr><th>6</th><td>:only-of-type</td><td>选择拥有父级的，该种元素的</td></tr>
<tr><th class=”end”>7</th><td>:empty</td><td>选择内容为空的</td>
<tr><td colspan=”3″>结构伪类函数</td></tr>
<tr><th>8</th><td>:nth-child(x)</td><td>选择拥有父级的，在父级里排第x的元素（可多选）</td></tr>
<tr><th>9</th><td>:nth-last-child(x)</td><td>选择拥有父级的，在父级里排倒数第x的元素（可多选）</td></tr>
<tr><th>10</th><td>:nth-of-type(x)</td><td>选择指定元素</td></tr>
<tr><th class=”end”>11</th><td>:nth-last-of-type(x)<td>倒数选择指定元素</td></tr>
</tbody>
</table>
</body>
</html>