将样式应用于COLGROUP但仅在TBODY（不是THEAD）中的CSS选择器？

Question

我想将背景颜色应用于COLGROUP，但仅限于表格的TBODY内。给定一个典型的日历表，其结构如下：

<table>
  <colgroup class="weekdays" span="5"/>
  <colgroup class="weekend" span="2"/>
  <thead>
    <tr>
      <td/><td/><td/><td/><td/>

      <!-- I'd like the columns of the following two cells to be untouched. -->
      <td/><td/>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td/><td/><td/><td/><td/>

      <!-- I'd like selector to apply the style only to the columns of the following two cells -->
      <td/><td/>
    </tr>
    ...
  </tbody>
</table>

是否有一个CSS选择器（或类似的东西）可以让我在THEAD和TBODY的“周末”COLGROUP中应用不同的风格？

Answer 1

使用您的示例HTML，我不相信有一个选择器可以达到您想要的效果。 colgroup元素在CSS行为方面相当独特，因为为colgroup设置样式最终会影响（通过CSS继承规则）与colgroup完全无关的元素。这意味着您不能使用colgroup.weekend tbody这样的选择器，因为tbody不是colgroup的子节点（反之亦然），它只是不继承那种方式。

我能达到你想要的最接近的是：

thead td { background-color:white; }
colgroup.weekend { background-color:red; }

thead td是比colgroup.weekend更具体的选择器，因此您最终会“覆盖”标题的colgroup颜色。