如何使用纯 CSS 在 GridView 中交替行颜色？答案

【问题标题】：How to alternate rowcolor in a GridView using pure CSS?如何使用纯 CSS 在 GridView 中交替行颜色？
【发布时间】：2010-03-10 07:04:10
【问题描述】：

我想在 GridView 中使用纯 CSS 替换 rowcolor，即：我不想使用 asp.net 主题；我宁愿不必使用 jQuery，或者在每个 gridview 上定义定义 AlternatingRowStyle-BackColor （除非有我必须的原因）。

这是我的 CSS（不起作用）：

.gridView {font-size:11px
}

.gridView tr:nth-child(even) {background-color: #FFF}
.gridView tr:nth-child(odd) {background-color: #FFCC00}

.gridView tr:nth-child(even) td {background-color: #FFF}
.gridView tr:nth-child(odd) td {background-color: #FFCC00}

（我包含 .gridView {font-size:11px} 只是为了确认我使用了正确的 CssClass。）

这是不可能的，还是我做错了什么。

【问题讨论】：

不需要 IE6 支持。

标签： asp.net css

【解决方案1】：

您使用的不是所有浏览器都支持的 CSS3。要以跨浏览器兼容的方式执行此操作，您需要使用交替类、jQuery 或其他方法来执行此操作。

交替类是一种相当优雅的方式，恕我直言。

更新：这显示了gridview方式：

<asp:gridview id="CustomersGridView" runat="server">        
    <RowStyle CssClass="Row" />
    <AlternatingRowStyle CssClass="AltRow" />
</asp:gridview>

【讨论】：

通过“交替类”，你的意思是，我必须在我的 html 中的每个交替行上定义一个类吗？
您使用的 ASP.NET GridView 正确吗？看我的回答，我更新了。
啊，非常好，确实非常优雅。在这里可以看到类似但略有不同的方法：stackoverflow.com/questions/607547/…