Переопределить цвет строки в одной строке внутри таблицы с помощью чередующихся цветов строк - PullRequest
10 голосов
/ 15 ноября 2011

У меня есть таблица со стилями чередующихся строк CSS3, но мне нужно переопределить стили для нескольких строк.

Вот CSS для таблицы:

table.primary tr:nth-child(odd) {
    background-color: #e5e5e5;
}
table.primary tr:nth-child(even) {
    background-color: #ededed;
}

Мне нужно переопределить некоторые строки с совершенно другим цветом фона (и другим форматированием), и я надеялся просто добавить class= к отдельным строкам, но похоже, что это не отменяет вышеуказанный CSS.

, например

<table class="primary">
    <tr><td>one</td></tr>
    <tr class="new"><td>two</td></tr>
    <tr><td>three</td></tr>
</table>

В качестве альтернативы мне нужно пропустить CSS3 и использовать вместо него class="row1", class="row2", class="new".

Любые предложения о том, как переопределить nth-child с классом?

Ответы [ 4 ]

18 голосов
/ 15 ноября 2011

Поскольку классы и псевдоклассы имеют одинаковую специфику, этого должно быть достаточно для определения правила стиля .new после правил :nth-child(), подобных этому, при условии, что один класс должен переопределить все остальныестили:

table.primary tr:nth-child(odd) {
    background-color: #e5e5e5;
}
table.primary tr:nth-child(even) {
    background-color: #ededed;
}
table.primary tr.new {
    background-color: #ffc;
}

jsFiddle demo

1 голос
/ 15 ноября 2011

попробуйте

table.primary tr.new:nth-child(odd) {
background-color: #ff0000;
}
table.primary tr.new:nth-child(even) {
background-color: #000000;
}
0 голосов
/ 15 ноября 2011

Вам не хватает открывающего тега td из второго ряда.

Затем следуйте инструкциям BoltClock:)

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

Вы знаете, что можете поместить несколько операторов CSS в один класс, верно?тогда вы можете переопределить с помощью! Important, когда это необходимо:)

вот скрипта JS

http://jsfiddle.net/dJWR2/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...