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

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 元素之外，我看不到任何解决方法(这就是为什么在第一个中引入列组合器的全部原因)位置，以及为什么我真的希望它得到实现，尽管我敢肯定性能爱好者会不同意并声称您最好用任何一种方式在所有单元格元素上使用类来膨胀标记。