将样式应用于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颜色.