html - 如何阻止 colgroup 样式被 tr 样式覆盖？

Question

大家好，我有这样一张 table 吗？

<table>

<colgroup>
    <col class="selected">
    <col>
</colgroup>

    <tbody>
      <tr>
          <td>lorem</td>
          <td>lorem</td>
      </tr>
    </tbody>
</table>

我的风格是:

col.selected {
background-color: #f3f3f3; /*for selected column*/
}

table tbody tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
}

一切都很好，但是 zerba 风格 owerites col 选择风格。有什么想法可以避免这种情况，以便所选列将使用 col 而不是第 n 个子项的样式？

Answer 1

问题是 zebra 背景的选择器具有更高的 specificity比 col 选择器。给 col 选择器更高的特异性，或者给 tr 选择器更低的特异性(或两者)。如果它们相等，则 CSS 中的规则顺序很重要。

table colgroup col.selected {
    background-color: #f3f3f3; /*for selected column*/
} /* specificity: 13 */

table tr:nth-of-type(2n+2){
    background-color:#fafafa; /*zebra effect*/
} /* specificity: 12, will be overridden */