html如何设置表格交错颜色,CSS如何设置多列每隔交叉颜色
时间: 2023-08-14 08:04:09 浏览: 188
在 HTML 中,可以使用 CSS 的 `nth-child` 伪类来设置表格交错颜色。例如,以下代码将设置表格的奇数行为灰色,偶数行为白色:
```html
<style>
/* 奇数行 */
tr:nth-child(odd) {
background-color: #f2f2f2;
}
/* 偶数行 */
tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
<tr>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
```
在 CSS 中,可以使用 `nth-child` 或 `nth-of-type` 伪类来设置多列每隔交叉颜色。例如,以下代码将设置表格的第一列和第三列每隔一列为灰色,第二列和第四列每隔一列为白色:
```css
/* 奇数列 */
td:nth-child(odd),
td:nth-of-type(odd) {
background-color: #f2f2f2;
}
/* 偶数列 */
td:nth-child(even),
td:nth-of-type(even) {
background-color: #ffffff;
}
```
注意,使用 `nth-child` 伪类时,会对所有类型的子元素进行选择;而使用 `nth-of-type` 伪类时,只会对指定类型的子元素进行选择。因此,如果要针对表格中的单元格进行选择,应该使用 `td:nth-child` 或 `td:nth-of-type`。