Question

我在ASP.NET应用程序中创建了一个GridView，并使用自动格式化工具应用了一个有吸引力的样式。现在我将样式标记移动到CSS工作表上，我有一个奇怪的问题，标题行中的文本不是正确的颜色（它应该是白色但它显示为亮蓝色）。 此问题仅在我打开排序时显示。

其他一切都很好。例如，我可以将标题背景更改为红色，它会变为红色，其余网格样式也会适当应用。

任何人都有关于这笔交易的线索？我在下面列出了代码段。我也是CSS的新手。如果有人有任何提示可以让我的CSS标记更好，请告诉我。

谢谢！

这是ASP.NET代码。我可以在HeaderStyle中添加ForeColor =“White”，一切正常。

<asp:GridView ID="GridView1" runat="server" CssClass="grid"
AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" 
EmptyDataText="There are no data records to display." AllowSorting="True" 
CellPadding="4" GridLines="Both">
<FooterStyle CssClass="grid-footer" />
<RowStyle CssClass="grid-row" />
    <Columns>
        <asp:BoundField DataField="Kingdom" HeaderText="Kingdom" 
            SortExpression="Kingdom" />
        <asp:BoundField DataField="Phylum" HeaderText="Phylum" 
            SortExpression="Phylum" />
        <asp:BoundField DataField="GenusSpeciesStrain" HeaderText="Genus species (strain)" 
            SortExpression="GenusSpeciesStrain" />
        <asp:BoundField DataField="Family" HeaderText="Family" 
            SortExpression="Family" />
        <asp:BoundField DataField="Subfamily" HeaderText="Subfamily" 
            SortExpression="Subfamily" />
        <asp:BoundField DataField="ElectronInput" HeaderText="Electron Input" 
            SortExpression="ElectronInput" />
        <asp:BoundField DataField="OperonLayout" HeaderText="Operon Layout" 
            SortExpression="OperonLayout" />
    </Columns>
    <PagerStyle CssClass="grid-pager" />
    <SelectedRowStyle CssClass="grid-selected-row" />
    <HeaderStyle CssClass="grid-header" />
    <EditRowStyle CssClass="grid-row-edit" />
    <AlternatingRowStyle CssClass="grid-row-alternating" />

这是我正在使用的样式表中的内容：

body {
}

.grid
{
    color: #333333;
}

.grid-row
{
    background-color: #EFF3FB;
}

.grid-row-alternating
{
    background-color: White;
}

.grid-selected-row
{
    color: #333333;
    background-color: #D1DDF1;
    font-weight: bold;
}

.grid-header, .grid-footer
{
    color: White;
    background-color: #507CD1;
    font-weight: bold;
}

.grid-pager
{
    color: White;
    background-color: #2461BF;
    text-align: center;
}

.grid-row-edit
{
    background-color: #2461BF;
}

Answer 1

我猜测亮蓝色非常类似于超链接的颜色。使gridview排序意味着你的标题内部会有一个标记，而不仅仅是纯文本。

这应该对它进行排序：

.grid-header a { color: White; background-color: #507CD1; font-weight: bold; }

Answer 2

我不确定你是如何在你的标题上获得白色背景w /或没有排序因为你的CSS中网格标题背景设置为蓝色（＃507CD1）：

.grid-header, .grid-footer { color: White; background-color: #507CD1; font-weight: bold; }

如果您希望标题背景为白色（您需要将字体颜色更改为更暗的颜色），这就是它需要的内容：

.grid-header, .grid-footer { color: #000; background-color: #fff; font-weight: bold; }

你还需要从GridView的HeaderStyle属性中删除ForeColor，以便能够像这样看到标题中的文本：

<HeaderStyle CssClass="grid-header" />

Answer 3

以下对我有用。添加：

.grid-header th a
{
    color: White;
}

“th a”无论AllowSorting如何都有效。

Answer 4

这是我能让它发挥作用的唯一方法：

.HeaderStyle a
{
    background-color: #DE7B0A;
    color: White!important
}

我注意到，呈现的.aspx会在链接上放置style="color:#333333"标记。使颜色选项!important覆盖默认渲染是我可以使其工作的唯一方法。

希望有人帮助过。

Answer 5

样式表中的标题颜色是正确的：＃507CD1为亮蓝色。那么它在哪里显示为白色？在Visual Studio的设计师？你的意思是标题背景是白色还是文本？

此外，从标记中删除ForeColor =“White”也不会有什么坏处。它已经在样式表中了。

更新：我没有彻底阅读这个问题，道歉。以上是无稽之谈。（或者在我撰写答案时，问题已被修改。不知道）

Answer 6

请注意，在Indy建议的James中加入了th，如

.grid-header th {color：White; }

将通过设置排序列的使用来阻止分页器部分中的链接生效。

打开排序时出现ASP.NET GridView CSS问题

6 个答案: