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

【问题标题】：CSS selector that applies a style to COLGROUP but only within TBODY (not THEAD)?将样式应用于 COLGROUP 但仅在 TBODY（不是 THEAD）内的 CSS 选择器？
【发布时间】：2010-12-17 00:27:25
【问题描述】：

我想将背景颜色应用于 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 应用不同的样式？

【问题讨论】：

标签： html css css-selectors

【解决方案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 颜色。

【讨论】：