Проблема ASP.NET GridView CSS при включенной сортировке

Question

Я создал GridView в приложении ASP.NET и использовал инструмент «Автоформат», чтобы применить привлекательный стиль. Теперь я перемещаю разметку стиля на лист CSS, и у меня возникла странная проблема, когда текст в строке заголовка имеет неправильный цвет (он должен быть белым, но ярко-синим). Эта проблема появляется только при включении сортировки.

Все остальное работает нормально. Например, я могу изменить фон заголовка на красный, и он станет красным, а остальные стили сетки будут применены соответствующим образом.

Кто-нибудь знает, что это за сделка? Я включил фрагменты кода ниже. Я также довольно новичок в CSS. Если у кого-нибудь есть какие-либо советы по улучшению разметки CSS, дайте мне знать.

Спасибо!

Вот код ASP.NET. Я могу добавить ForeColor = "White" в HeaderStyle, и все работает нормально.

<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

Это единственный способ заставить его работать:

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

Я заметил, что при отображении .aspx тег style="color:#333333" помещается на саму ссылку. Настройка цвета !important для переопределения рендеринга по умолчанию - единственный способ заставить его работать.

Надеюсь, это кому-то помогло.

Answer 3

Следующее сработало для меня. Добавить:

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

«th a» работает независимо от AllowSorting.

Answer 4

Я не уверен, как вы получаете белый фон на вашем заголовке без или с сортировкой, потому что у вас есть фоновый заголовок сетки, который устанавливает синий цвет (# 507CD1) в вашем CSS:

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

вот что нужно, если вы хотите, чтобы фон заголовка был белым (вам также нужно изменить цвет шрифта на более темный):

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

и вам также необходимо удалить ForeColor из атрибута HeaderStyle GridView, чтобы иметь возможность видеть текст в заголовке следующим образом:

<HeaderStyle CssClass="grid-header" />

Answer 5

Обратите внимание, что добавление th в стиле, предложенном Джеймсом в Инди, как в

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

не позволяет ссылкам в разделе пейджера задавать настройку, используемую для столбца сортировки.

Answer 6

Цвет заголовка в таблице стилей правильный: # 507CD1 ярко-синий. Где это выглядит белым? В дизайнере Visual Studio? Вы имеете в виду, что заголовок background будет белым или текст ?

Также не помешает удалить ForeColor = "White" из разметки. Это уже в таблице стилей.

Обновление : Я недостаточно внимательно прочитал вопрос, мои извинения. Выше чепуха. (Или вопрос был изменен, когда я составлял свой ответ. Не знаю)