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

Question

大家好，我有这样的桌子吗？

<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 的样式而不是 nth child ？

Answer 1

问题是背景的选择器比选择器zebra具有更高的特异性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 */

Answer 2

除了您在 html 中的 col 没有应用选定的类之外，您的代码看起来还不错。这可能是您在实际页面上的问题吗（我相信您只发布了一个代码示例）。

Answer 3

据我所知，你不能。最好的解决方法可能是动态渲染一些突出显示正确列的 CSS。例如，要突出显示表格的第二列，您可以使用：

table tbody tr td:nth-child(2) {
    background-color:red;  
}

这里的例子：http: //jsfiddle.net/ChrisPebble/tbLrv/