html - CSS 规则中选择器的优先级

Question

让我先展示示例代码

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

我的期望：表格列由两种颜色着色，当鼠标悬停一个单元格时，整行以橙色突出显示。

代码实际做了什么：表格列用两种颜色着色，悬停时没有任何反应。

我猜.celland#tbl td比 更具体#tbl tr，这就是为什么忽略悬停样式的原因，但我不知道如何解决它，请帮忙。谢谢。

Answer 1

您应该更深入地了解特异性： http: //www.standardista.com/css3/css-specificity/

#id选择器 = 100 个“点”

.class和:pseudo-class选择器= 10“点”

在您的特定情况下，这将起到作用：

#tbl td:nth-child(odd){
    background-color:#F0FFE2;
}
#tbl tr:hover td.cell {
    background-color:#FFA270;
}