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

Я хотел бы применить фоновый цвет к 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?

Ответ 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 для заголовка.