html - 将样式应用于 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; }<br/>
colgroup.weekend { background-color:red; }

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