Question

我想用css为我的gridview标题中的锚链接设置样式。我的类的风格是有效的，但th a的风格不适用于它。它被包含div的样式覆盖。此外，如果我在没有前一课的情况下th a或th a:hover，则不会影响我th中的超链接。我已经在IE和Firefox中测试了这个。这是我的CSS的gridview部分：

.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  
{  
    font-weight: bold;  
    color:Red;  
}  
.gridview th a:hover  
{  
    font-weight: bold;  
    color:Red;  
}  
.gridview td  
{  
    text-align:center;  
}

Answer 1

这可能是一个特殊问题。 CSS规则不仅根据其来源和顺序加权，而且根据公式：

内联？ 1000分
选择器中的ID？每个100分
类和伪类？每个10分
具体要素？每个1分

因此你可能会有这样的事情：

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

压倒你的风格：

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

你可以通过使你的风格更具体来解决这个问题：

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

或使用hackier !important方法：

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

从技术上讲，我应该提一下，如果任何位置达到10，这并不是直接添加点。例如，如果由于某些奇怪的原因你有一个选择器有12个类，那么特异性权重可能是：

0   1   12   0

也就是说，不要随身携带。以上内容不如：

0   2   0   0

最后，我假设您意识到您的:hover样式与您的普通链接样式相同。

Answer 2

它可能与GridView控件呈现表格HTML的方式有关。标题行未按预期包含在thead元素中。

正确使用thead和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标题

网格视图控件使用td而不是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>

您可以像这样添加要附加到GridViews标头的CSS类。

 <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>

祝你好运，希望有所帮助。

asp：gridview中TH超链接的CSS

2 个答案: