CSS for TH hyperlink in asp:gridview

I want to style the anchor links in my gridview header with css. My style for the classes th works but the style for th a does not apply to it. It is overwritten by the containing divs a style. Also if I do th a or th a:hover without a preceding class it does not effect the hyperlinks in my th. I have tested this in both IE and Firefox. This is the gridview portion of my css:

.gridview  
{  
    border-color: #9BBE00;  
    border-width: thin;  
    border-style: solid;  
    width: 700px;   
}

.gridview th  
{  
    background-color: #F4A80A; 
    color: White;  
    font-weight: bold;  
}  
.gridview th a  
开发者_StackOverflow中文版{  
    font-weight: bold;  
    color:Red;  
}  
.gridview th a:hover  
{  
    font-weight: bold;  
    color:Red;  
}  
.gridview td  
{  
    text-align:center;  
}

This is probably a specificity issue. CSS rules are weighted not only by their source and order, but according to a formula:

1. Inline? 1000 points
2. IDs in selector? 100 points for each
3. Classes and pseudo-classes? 10 points each
4. Specific elements? 1 point each

Therefore you might have something like this:

div#something a { color: blue; } /* 102 points */

overriding your style:

.gridview th a { color: red; } /* 12 points */

You can solve this by either making your style more specific:

div#something .gridview th a { color: red; } /* 123 points */

or using the hackier !important approach:

.gridview th a { color: red !important; } /* overrides more specific selectors */

To be technically correct, I should mention that this is not really straight addition of points if any position reaches 10. For example, if for some strange reason you had a selector with 12 classes, the specificity weight might be:

0   1   12   0

That is, don't carry the one. The above is less specific than:

0   2   0   0

Finally, I assume you realize your :hover style is the same as your plain link style.

It could have something to do with the way the GridView control renders table HTML. The header row is not contained in the thead element as expected.

Correctly using thead and th

<table>
        <thead>
            <tr>
                <th>
                    Column One Header
                </th>
                <th>
                    Column Two Header
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Column One
                </td>
                <td>
                    Column Two
                </td>
            </tr>
        </tbody>
    </table>

GridView Header

The grid view control instead renders the header cells inside the table body using td instead of th.

<table>
        <tbody>
            <tr>
                <td>
                    Column One Header
                </td>
                <td>
                    Column Two Header
                </td>
            </tr>
            <tr>
                <td>
                    Column One
                </td>
                <td>
                    Column Two
                </td>
            </tr>
        </tbody>
    </table>

You can add a CSS class to be appended to the GridViews header like so.

 <style type="text/css"> 
    .gridview td.gridviewheader
    {  
        background-color: #F4A80A; 
        color: White;  
        font-weight: bold;  
    }  
    .gridview td.gridviewheader a  
    {  
        font-weight: bold;  
        color:Red;  
    }  
    .gridview td.gridviewheader a:hover  
    {  
        font-weight: bold;  
        color:Red;  
    }  
    </style>

    ....

    <asp:GridView ID="gvExample" CssClass="gridview" runat="server">
        <HeaderStyle CssClass="gridviewheader" />
        <Columns>
        </Columns>
    </asp:GridView>

Good luck, hope it helps.