Как сделать так, чтобы стили групп не переписывались tr стилями?

Question

Привет, ребята, у меня есть такой стол?

<table>

<colgroup>
    <col class="selected">
    <col>
</colgroup>

    <tbody>
      <tr>
          <td>lorem</td>
          <td>lorem</td>
      </tr>
    </tbody>
</table>

и мои стили:

col.selected {
background-color: #f3f3f3; /*for selected column*/
}

table tbody tr:nth-of-type(2n+2){
background-color:#fafafa; /*zebra effect*/
}

все прекрасно работает, однако стиль выбора owerites col Zerba стиль. Любые идеи, как избежать этого, чтобы выбранный столбец будет использовать стиль из col, а не nth child?

Answer 1

Насколько я знаю, ты не можешь. Лучшим обходным решением может быть динамический рендеринг некоторого CSS, который выделяет правильный столбец. Например, чтобы выделить второй столбец таблицы, вы можете использовать:

table tbody tr td:nth-child(2) {
    background-color:red;  
}

Пример здесь: http://jsfiddle.net/ChrisPebble/tbLrv/

Answer 2

Проблема в том, что селектор для zebra фон имеет более высокую специфичность, чем col селектор. Либо дайте col выбрать более высокую специфичность или дать tr выберите нижний (или оба). Если они равны, порядок правил в вашем CSS имеет значение.

table colgroup col.selected {
    background-color: #f3f3f3; /*for selected column*/
} /* specificity: 13 */

table tr:nth-of-type(2n+2){
    background-color:#fafafa; /*zebra effect*/
} /* specificity: 12, will be overridden */

Answer 3

Ваш код выглядит отлично, кроме вашего col в html, к которому не применен выбранный класс. Может ли это быть вашей проблемой на реальной странице (я полагаю, что вы опубликовали только пример кода).