Question

我第一次使用COLGROUP和COL元素，以突出显示数据表的特定列。我的表格中还有特殊的行，例如页眉，页脚和可能突出显示的行。我没有找到直接将样式分配给行和列样式的交集。是否可以编写这样的CSS选择器？

简单示例：

<table>
  <colgroup>
    <col span="2">
    <col class="col_highlight">
  </colgroup>
  <thead>
    <tr>
      <th>Product</th> <th>Sales</th> <th>Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tools</td> <td>$12,345.67</td> <td>$345.67</td>
    </tr>
    <tr>
      <td>Books</td> <td>$8,910.11</td> <td>$910.11</td>
    </tr>
  </tbody>
</table>

第三列以样式col_highlight突出显示（只是不同的背景颜色）。我希望特殊颜色显示在表体（<TD>元素）中而不是标题（<TH>元素）中。这些单元格的CSS选择器是什么？我试过......

td .col_highlight
td.col_highlight
.col_highlight td

Answer 1

选择器级别4为此目的引入了column combinator，但没有实现，并且该功能本身存在风险：

.col_highlight || td

需要一个新的组合子，因为TD不是COL元素的后代，反之亦然，因此你尝试使用后代组合子的选择器都不会起作用。 TD本身没有这个类，所以复合两个选择器也不会有用。

不幸的是，除了将类应用于TH和TD元素并直接定位它们而不是依赖于COLGROUP和COL元素之外，我看不到任何变通方法（这是第一个引入列组合器的全部原因）地方，以及为什么我真的希望它得到实施，虽然我确信性能迷们会不同意并且声称你最好用所有单元格元素上的类填充你的标记。）

是否可以为TD和COL / COLGROUP元素的交互编写CSS选择器？

1 个答案: