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

【问题标题】：Is is possible to write a CSS selector for the interaction of TD and COL/COLGROUP elements?是否可以为 TD 和 COL/COLGROUP 元素的交互编写 CSS 选择器？
【发布时间】：2017-11-19 18:16:16
【问题描述】：

我第一次使用 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

【问题讨论】：

没有。如果它的 about thead tr 没有显示突出显示的 col bg，则为其 tr 设置一个 bg-color，并且 col bg-color 将被隐藏：codepen.io/anon/pen/eRgZya
不确定我完全了解您的目标。你能画一个简单的图形例子来展示你想要达到的效果吗？

标签： html css html-table css-selectors

【解决方案1】：

4 级选择器为此引入了 column combinator，但不存在任何实现，并且该功能本身存在风险：

.col_highlight || td

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

不幸的是，除了将类应用于 TH 和 TD 元素并直接定位它们而不是依赖于 COLGROUP 和 COL 元素之外，我看不到任何解决方法（这就是第一次引入列组合器的全部原因地点，以及为什么我真的希望它能够实现，尽管我确信性能迷会不同意并声称你最好用所有单元格元素上的类来膨胀你的标记）。

【讨论】：