即使我为“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('ctl00$MainContent$GridView1','Sort$ID')">ID</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$AutoRun Name')">AutoRun Name</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Rule ID')">Rule ID</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Rule Name')">Rule Name</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$# Users Type')"># Users Type</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$# Users Value')"># Users Value</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Repeat Period')">Repeat Period</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Month')">Month</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Day of Month')">Day of Month</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Day of Week')">Day of Week</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Hour')">Hour</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$AM/PM')">AM/PM</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Created By')">Created By</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Message ID')">Message ID</a></th>
<th scope="col"><a href="javascript:__doPostBack('ctl00$MainContent$GridView1','Sort$Disabled')">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('Are you sure you want to delete auto run #1039?');" 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('Are you sure you want to delete auto run #1041?');" 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('Are you sure you want to delete auto run #1042?');" 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;
}
最佳答案
假设这条规则给了你亮点:
.GridView tr:hover
{
background-color: #fffeb7;
color: #000;
}
简单地从选择器中删除第一行的类，使用 :not() 伪:
.GridView tr:not(.GridViewHeader):hover
{
background-color: #fffeb7;
color: #000;
}
您可以对应用的其他悬停样式使用相同的概念...
关于html - 如何仅覆盖标题行的 css 类，但将表的其余部分保留为表的样式类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26766996/