日期:2014-05-17  浏览次数:20408 次

CSS简单问题,如何单独定义GridView表头超链接样式
怎么单独的定义表头的 A 标记样式。我单独定义了HeaderStyle 都会被全局的 A:link 覆盖,而全局的A:link 又不想改它。


HTML code
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
  
  
  <style type="text/css" media="screen">


html,body 
{
    font-family: Verdana, Arial, @宋体; FONT-SIZE: 13px; MARGIN: 0; color: #333333; 
}

table {
border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */
border:solid #999; /* 设置边框属性;样式(solid=实线)、颜色(#999=灰) */
border-width:1px 0 0 1px; /* 设置边框状粗细:上 右 下 左 = 对应:1px 0 0 1px */
}
table caption {font-size:14px;font-weight:bolder;}
table th,table td {border:solid #999;border-width:0 1px 1px 0;padding:2px; height:25px;}
tfoot td {text-align:center;}


A:link {
     COLOR: #004080; TEXT-DECORATION: none; /* 表示未被访问时 */
}

A:visited {
    COLOR:#004080;  TEXT-DECORATION: none; /* 访问后 */
}

A:hover {
     COLOR: #004080;  TEXT-DECORATION: underline; /* 指针指在 */
}


A:active {
     COLOR: #004080; TEXT-DECORATION: none; /* 鼠标点击时 */
    
}


.GridHeader
{
    background-color:#d8d8d8;  font-weight:bold; 
}




</style>

  
  
</head>
<body>
    <form id="form1" runat="server">
   
   <div align="center">
       <div style="width:800px;">
       
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
               AutoGenerateColumns="False" AllowSorting="True" OnSorting="GridView1_Sorting" 
               OnRowCreated="GridView1_RowCreated" Width="100%" DataKeyNames="ProductID"  
               OnRowDataBound="GRidView1_RowDataBound">
        <HeaderStyle CssClass="GridHeader"  />
        <Columns>
         <asp:BoundField DataField="ProductID" HeaderText="ProductID" SortExpression="ProductID" />
       
       
       
         <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
       
       
       
           <asp:TemplateField HeaderText="ProductName" SortExpression="ProductName">
                    <ItemTemplate>
                      <%#Eval("ProductName")%>
                    </ItemTemplate>
                    <HeaderStyle CssClass="a1"  />
                    <ItemStyle HorizontalAlign="Left" />
           </asp:TemplateField>
               
       
       
       
       
        </Columns>
        
         <pagersettings  Visible="False" /> 

        </asp:GridView>
        
     
                      
             
     </div> 
 </div>   
    </form>
        
  
</body>
</html>



------解决方案--------------------
使用CSS筛选器,增加一条样式:

.GridHeader A
{
/* 在这里添加对表头超链接的定义*/
font-color:#FFFFFF;
}