css 偶数行变色

作者：狂神战天发布日期:2025-03-09 浏览:50

/* 使用 CSS 选择器 :nth-child(偶数) 来实现表格或列表的偶数行变色 */
table tr:nth-child(even) {
    background-color: #f2f2f2; /* 设置偶数行的背景颜色 */
}

/* 如果是列表，可以这样写 */
ul li:nth-child(even) {
    background-color: #f2f2f2; /* 设置偶数行的背景颜色 */
}

解释说明：

:nth-child(even) 是一个伪类选择器，用于选择父元素中的偶数子元素。
在上面的例子中，table tr:nth-child(even) 会选择表格中的偶数行，并应用指定的样式（如背景颜色）。
同样地，对于无序列表 ul 中的偶数项，也可以使用相同的伪类选择器来实现变色效果。

上一篇：css flex换行

下一篇：css横向滚动条