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而不是第n个孩子的样式？

Answer 1

问题是zebra背景的选择器比col选择器高specificity。要么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/

如何阻止col样式被tr样式覆盖？

3 个答案: