让我先展示一下示例代码
#tbl tr:hover {
background-color: #FFA270 !important;
}
#tbl td:nth-child(odd) {
background-color: #F0FFE2;
}
.cell {
height: 5ex;
width: 5em;
background-color: #E2F1FF;
text-align: center;
}
<table id="tbl">
<tr>
<td class="cell">001</td>
<td class="cell">002</td>
<td class="cell">003</td>
<td class="cell">004</td>
</tr>
<tr>
<td class="cell">001</td>
<td class="cell">002</td>
<td class="cell">003</td>
<td class="cell">004</td>
</tr>
<tr>
<td class="cell">001</td>
<td class="cell">002</td>
<td class="cell">003</td>
<td class="cell">004</td>
</tr>
<tr>
<td class="cell">001</td>
<td class="cell">002</td>
<td class="cell">003</td>
<td class="cell">004</td>
</tr>
</table>
我的期望是什么：表格列有两种颜色，当鼠标悬停在单元格上时，整行以橙色突出显示。
代码实际上做了什么：表格列有两种颜色，悬停时没有任何反应。
我猜是.cell and #tbl td比更具体#tbl tr，这就是悬停样式被忽略的原因，但我不知道如何修复它，请帮忙。谢谢。
您应该更深入地了解特异性：http://www.standardista.com/css3/css-specificity/ http://www.standardista.com/css3/css-specificity/
#id选择器= 100“点”
.class and :pseudo-class选择器 = 10 个“点”
在您的具体情况下，这可以解决问题：
#tbl td:nth-child(odd){
background-color:#F0FFE2;
}
#tbl tr:hover td.cell {
background-color:#FFA270;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
