一、什麼是偽類？
CSS（Cascading Style Sheets）是一種用於規定文檔樣式的語言。CSS3是一個較新的版本，其中包含了許多新的選擇器，比如偽類。偽類可以被用來選擇沒有被HTML文檔本身的「指針」所指中的元素，並且可以添加特定的樣式。
例如，使用CSS3的:hover偽類可以在用戶把滑鼠放在一個元素上時改變該元素的樣式。在本教程中，我們將會使用CSS3的:nth-child偽類來實現表格隔行變色效果。
二、什麼是nth-child偽類？
CSS3的:nth-child偽類可以根據某個元素的位置來選擇元素，而不是根據它們在HTML代碼中出現的順序。例如，使用:nth-child(2)可以選擇一個元素的第二個子元素。如果您需要更多關於:nth-child的用法，請參閱MDN文檔。
三、如何使用:nth-child偽類實現表格隔行變色效果？
在這個例子中，我們會用:nth-child來選擇每個表格中需要變色的行。我們將會給奇數行添加背景色，以便使它們與偶數行區分開來。
/* 給奇數行添加背景色 */
tr:nth-child(odd) {
background-color: #F2F2F2;
}
上面的代碼將選擇每個表格行的奇數行，並且添加背景色。您可以根據自己的需要更改背景色的值。
如果您想要給偶數行添加背景色，那麼您只需要把odd改為even即可：
/* 給偶數行添加背景色 */
tr:nth-child(even) {
background-color: #F2F2F2;
}
四、完整的示例代碼
下面是一個完整的表格隔行變色效果的示例代碼：
<style>
/* 給奇數行添加背景色 */
tr:nth-child(odd) {
background-color: #F2F2F2;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>小明</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>小紅</td>
<td>21</td>
<td>女</td>
</tr>
<tr>
<td>小強</td>
<td>22</td>
<td>男</td>
</tr>
</table>
使用上述代碼，您可以得到一個簡單的表格，其中奇數行的背景色為淡灰色。
原創文章，作者：SJOE，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/143843.html
微信掃一掃 
支付寶掃一掃 