CSS可以用來讓網頁的表格更加美觀，其中一個常用的功能是被勾選的行顏色變化。

/* 設置選中后的行顏色 */
tr:hover {background-color:#f5f5f5;}
tr.active {background-color:#add8e6;}
/* JS代碼 */
function toggleActiveRow(row) {
if (row.classList.contains("active")) {
row.classList.remove("active");
} else {
row.classList.add("active");
}
}
/* HTML表格 */
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
</thead>
<tbody>
<tr onclick="toggleActiveRow(this)">
<td>小明</td>
<td>20</td>
<td>男</td>
</tr>
<tr onclick="toggleActiveRow(this)">
<td>小紅</td>
<td>22</td>
<td>女</td>
</tr>
<tr onclick="toggleActiveRow(this)">
<td>小李</td>
<td>24</td>
<td>男</td>
</tr>
</tbody>
</table>

以上代碼中，我們使用CSS設置了選中后行的顏色，對于鼠標懸浮在表格行上的情況，使用:hover偽類選擇器實現；對于被選中的行，我們使用自定義的.active類名來設置，在JS代碼中通過classList添加或刪除該類名。在HTML表格中，為每一行添加onclick事件，通過JS代碼來切換.active類名實現選中行的樣式變化。