欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css表格單雙行不同色

CSS
馮子軒1年前5瀏覽0評論

CSS可以很方便地給表格設置樣式，比如表格單雙行不同色的效果。代碼如下：

table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}

這段代碼的意思是，將表格的奇數行背景色設置為淺灰色（#f2f2f2），偶數行背景色設置為白色（#ffffff）。其中，nth-child是CSS3中的偽類選擇器，用于選擇元素的特定序號。例如，nth-child(odd)就是選擇序號為奇數的元素。

要實現這個效果，還需要在HTML中標記出表格的單雙行，代碼如下：

<table>
<tr class="odd"><td>1</td></tr>
<tr class="even"><td>2</td></tr>
<tr class="odd"><td>3</td></tr>
<tr class="even"><td>4</td></tr>
</table>

在這段代碼中，用class="odd"和class="even"標記出了表格的奇數行和偶數行。這樣，CSS就可以根據這些標記來設置樣式。

實際使用時，可以將這段CSS代碼放在樣式文件中，然后在HTML中引用：

<head>
<link rel="stylesheet" href="styles.css">
</head>

這樣，所有表格都會自動應用這個樣式。