Селектор CSS, который применяет стиль к COLGROUP, но только внутри TBODY (не THEAD)?

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-селектор (или что-то подобное), который позволяет мне применять другой стиль к COLGROUP «выходных» в THEAD и TBODY?

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, поэтому вы в конечном итоге «переопределяете» цвет группы для заголовка.