CSS 能夠讓我們輕松地設置表格、列表或其他元素的樣式,其中有一項常見的需求是設置奇數行(Odd)的樣式。
我們可以使用偽類選擇器(假如你不熟悉偽類選擇器,可以先了解一下這個概念),通過下面的代碼,選中表格或列表的奇數行:
/* 選中表格的奇數行 */ tbody tr:nth-child(odd) { background-color: #f2f2f2; } /* 選中列表的奇數行 */ li:nth-child(odd) { background-color: #f2f2f2; }
在這段代碼中,我們使用了:nth-child
偽類選擇器來讓 CSS 選中一個元素的第 N 個子元素,其中 N 的值通過括號中的數字來指定。
當我們把odd
置于括號內時,就會把 CSS 應用于奇數行(表格的第 1、3、5 行等等,列表的第 1、3、5 個列表項等等),而偶數行則不受影響。
下面是一個使用了奇數行樣式的表格的例子:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lucas</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Amanda</td>
<td>30</td>
<td>Singapore</td>
</tr>
<tr>
<td>Alex</td>
<td>22</td>
<td>London</td>
</tr>
<tr>
<td>Sophie</td>
<td>28</td>
<td>Paris</td>
</tr>
</tbody>
</table>
我們在這個表格中應用了奇數行背景色,讓表格中的每個奇數行背景亮起來,方便用戶分辨表格的不同行。
總之,通過:nth-child
和odd
,我們可以輕松地選中表格或列表的奇數行,并設置相應的樣式。
上一篇css怎么定義width
下一篇css設置字為紅色