WebGrid 标头不使用 CSS 更改背景颜色 - ASP.NET MVC 3答案

【问题标题】：WebGrid header doesn't change background color using CSS - ASP.NET MVC 3WebGrid 标头不使用 CSS 更改背景颜色 - ASP.NET MVC 3
【发布时间】：2012-02-29 01:15:44
【问题描述】：

我有一个简单的问题：WebGrid 标题不会改变它的背景颜色。它的每个其他元素都响应 CSS 中的变化：页脚、交替列……唯一不响应 CSS 属性背景颜色或背景变化的元素是标题。有人遇到过这个问题吗？

这是我正在使用的 CSS：

.webgrid-header
{   
   background-color: #F4F4F4;
   padding: 6px 5px;
   text-align: center;
   height: 40px;

   border-bottom: 2px solid #959595;
   border-top: 2px solid #CCCCCC;
   border-left: 2px solid #CCCCCC;
   border-right: 2px solid #CCCCCC;
}

并且，例如，我将放置另一个正在工作的：

.webgrid-alternating-row
{
    background-color: #F4F4F4;
    height: 30px;    
    border-bottom: 1px solid #d2d2d2;
    border-left: 2px solid #CCCCCC;
    border-right: 2px solid #CCCCCC;
}

我将headerStyle: "webgrid-header" 放在了视图的GetHtml 方法中。谁能帮我？（对不起我的英语！）

【问题讨论】：

padding text-align height 和 border 样式是否适用于 .webgrid-header？我试图了解问题出在背景颜色还是类名上。
是的，它们都有效。只是background-color 和background 不起作用。疯狂的！ :(

标签： css asp.net-mvc styling webgrid

【解决方案1】：

您的表格单元格有自己的背景，这些背景被绘制在行的背景上。

【讨论】：

我不明白...那么为什么background-color 在.webgrid-alternating-row 中工作？那里的背景改变了它的颜色；只是标题没有！
嗯...看看 Firebug 中的元素，看看背景来自哪里
完美！还不知道 Firebug - 现在才开始 Web 开发！ :) 问题是 CSS 属性 table th 中的 background-color 是“支配”.webgrid-header 中的那个。非常感谢！
-1 这不是正确答案，因为它不是真的，因此不能成为 OP 的答案。看看这里：jsfiddle.net/r3nMW tr 实际上有一个可以通过 css 设置的背景属性。

【解决方案2】：

上面的答案和cmets让我有些困惑。

为了WebGrid css，webgrid-header需要指定一个th来设置背景颜色，如：

.webgrid-header th
{
    background-color: #666;
}

看到这篇文章 - http://www.websitesorcery.com/post/2012/03/12/Styling-the-ASPNET-MVC-WebGrid.aspx

【讨论】：

是的，没错——但是“th”中有另一种“背景颜色”在 webgrid 中占主导地位。答案实际上是使用 Firebug 工具来发现实际运行的 CSS 属性的想法。
也许是这样写另一个答案更清楚？
@pfeds 是正确的，您需要在 css 中添加“.webgrid-header th”以覆盖“table th”。我更正了丢失的“。”在他的原始答案中（请参阅他链接到的文章中的语法）。对于 IE9 用户，按 F12 会打开开发者工具，其功能与 FireFox 中的 Firebug 基本相同。
要在 Chrome 中访问开发者工具，请按 Ctrl+Shift+I。我猜 Safari 和 Opera 有类似的工具，但我不知道。