html - 如何仅覆盖标题行的 css 类，但将表的其余部分保留为表的样式类？

Question

即使我为“GridViewHeader”设置了不同的类，它也应用了这些样式，但它也应用了“GridView”类中的样式，但我只想要“GridViewHeader”样式。有办法做到这一点吗？

基本上，每个表格行上都有一个黄色突出显示，但我不希望在将鼠标悬停在标题行上时出现黄色突出显示。

此处为 HTML 示例:

<table class="GridView" cellspacing="0" rules="all" border="1" id="MainContent_GridView1" style="border-collapse:collapse;">
   <tr class="GridViewHeader">
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$ID&#39;)">ID</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$AutoRun Name&#39;)">AutoRun Name</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Rule ID&#39;)">Rule ID</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Rule Name&#39;)">Rule Name</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$# Users Type&#39;)"># Users Type</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$# Users Value&#39;)"># Users Value</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Repeat Period&#39;)">Repeat Period</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Month&#39;)">Month</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Day of Month&#39;)">Day of Month</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Day of Week&#39;)">Day of Week</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Hour&#39;)">Hour</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$AM/PM&#39;)">AM/PM</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Created By&#39;)">Created By</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Message ID&#39;)">Message ID</a></th>
      <th scope="col"><a href="javascript:__doPostBack(&#39;ctl00$MainContent$GridView1&#39;,&#39;Sort$Disabled&#39;)">Disabled</a></th>
   </tr>
   <tr>
      <td>1039</td>
      <td>New AV Users</td>
      <td>131</td>
      <td>New Trial AV Users</td>
      <td>Number</td>
      <td>100</td>
      <td>Daily</td>
      <td>n/a</td>
      <td>n/a</td>
      <td>n/a</td>
      <td>2</td>
      <td>PM</td>
      <td>bhannan</td>
      <td>28</td>
      <td>True</td>
      <td><a href="ScheduleAutomaticMessagingBatching.aspx?id=1039">View</a></td>
      <td><a href="ViewMessage.aspx?id=28">View Message</a></td>
      <td><a href="ViewMessageBatches.aspx?autorun-id=1039">View All Batches</a></td>
      <td><a href="CreateMessageBatchingRules?id=131">View Rule</a></td>
      <td><a href="RevalidateAllBatchesForRule.aspx?id=1039">Re-validate All Batches</a></td>
      <td><input type="submit" name="ctl00$MainContent$GridView1$ctl03$toggleDisabledButton1039" value="Enable/Disable" id="MainContent_GridView1_toggleDisabledButton1039_0" /></td>
      <td><input type="submit" name="ctl00$MainContent$GridView1$ctl03$deleteButton1039" value="Delete" onclick="javascript:return confirm(&#39;Are you sure you want to delete auto run #1039?&#39;);" id="MainContent_GridView1_deleteButton1039_0" /></td>
   </tr>
   <tr class="GridViewAlternatingRow">
      <td>1041</td>
      <td>Survey</td>
      <td>13</td>
      <td>Free Users AVM QA</td>
      <td>Number</td>
      <td>10</td>
      <td>Daily</td>
      <td>n/a</td>
      <td>n/a</td>
      <td>n/a</td>
      <td>4</td>
      <td>PM</td>
      <td>bhannan</td>
      <td>29</td>
      <td>True</td>
      <td><a href="ScheduleAutomaticMessagingBatching.aspx?id=1041">View</a></td>
      <td><a href="ViewMessage.aspx?id=29">View Message</a></td>
      <td><a href="ViewMessageBatches.aspx?autorun-id=1041">View All Batches</a></td>
      <td><a href="CreateMessageBatchingRules?id=13">View Rule</a></td>
      <td><a href="RevalidateAllBatchesForRule.aspx?id=1041">Re-validate All Batches</a></td>
      <td><input type="submit" name="ctl00$MainContent$GridView1$ctl04$toggleDisabledButton1041" value="Enable/Disable" id="MainContent_GridView1_toggleDisabledButton1041_1" /></td>
      <td><input type="submit" name="ctl00$MainContent$GridView1$ctl04$deleteButton1041" value="Delete" onclick="javascript:return confirm(&#39;Are you sure you want to delete auto run #1041?&#39;);" id="MainContent_GridView1_deleteButton1041_1" /></td>
   </tr>
   <tr>
      <td>1042</td>
      <td>New AV Licensed Users</td>
      <td>134</td>
      <td>Licensed AVM Users</td>
      <td>Number</td>
      <td>50</td>
      <td>Daily</td>
      <td>n/a</td>
      <td>n/a</td>
      <td>n/a</td>
      <td>5</td>
      <td>PM</td>
      <td>bhannan</td>
      <td>21</td>
      <td>False</td>
      <td><a href="ScheduleAutomaticMessagingBatching.aspx?id=1042">View</a></td>
      <td><a href="ViewMessage.aspx?id=21">View Message</a></td>
      <td><a href="ViewMessageBatches.aspx?autorun-id=1042">View All Batches</a></td>
      <td><a href="CreateMessageBatchingRules?id=134">View Rule</a></td>
      <td><a href="RevalidateAllBatchesForRule.aspx?id=1042">Re-validate All Batches</a></td>
      <td><input type="submit" name="ctl00$MainContent$GridView1$ctl05$toggleDisabledButton1042" value="Enable/Disable" id="MainContent_GridView1_toggleDisabledButton1042_2" /></td>
      <td><input type="submit" name="ctl00$MainContent$GridView1$ctl05$deleteButton1042" value="Delete" onclick="javascript:return confirm(&#39;Are you sure you want to delete auto run #1042?&#39;);" id="MainContent_GridView1_deleteButton1042_2" /></td>
   </tr>
</table>

CSS 示例:

/* GridView Styling */
 /***************************/
 .GridViewHeader
{
    background-color: #991313;
    font-weight: bold;
    color: #ffffff;
}

.GridViewHeader a
{    
    font-weight: bold;
    color: #ffffff;
}

.GridViewAlternatingRow
{
    background-color: #ddd;
}

.GridView tr:hover
{
    background-color: #fffeb7;
    color: #000;
}

.GridViewAlternatingRow tr:hover
{
    background-color: #fffeb7;
    color: #000;    
}

.GridView tr:hover a
{
    color: #000;
    text-decoration: underline;
}

.GridViewAlternatingRow tr:hover a
{
    color: #000;
    text-decoration: underline;
}

.GridView tr:hover a:hover
{
    color: #000;
    text-decoration: none;
}

.GridViewAlternatingRow tr:hover a:hover
{
    color: #000;
    text-decoration: none;
}

.GridView td { 
    padding: 5px;
}

Answer 1

假设这条规则给了你亮点:

.GridView tr:hover
{
    background-color: #fffeb7;
    color: #000;
}

简单地从选择器中删除第一行的类，使用 :not() 伪:

.GridView tr:not(.GridViewHeader):hover
{
    background-color: #fffeb7;
    color: #000;
}

您可以对应用的其他悬停样式使用相同的概念...