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

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

2 голосов
/ 19 ноября 2011

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

<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 style. Есть идеи, как этого избежать, чтобы в выбранном столбце использовался стиль из col, а не nth child?

Ответы [ 3 ]

1 голос
/ 09 мая 2013

Проблема в том, что селектор для фона 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 */
0 голосов
/ 19 ноября 2011

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

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

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

0 голосов
/ 19 ноября 2011

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

...