Установка цвета фона строк таблицы с полосками зебры

Question

Я использую:

tr:nth-child(2n+1) {
  background-color: #DDDDDD;
}

Зебра-столик. У меня есть класс:

.redbg {
  background-color: #FF6666;
}

И пользуюсь:

$(this).parent().parent().addClass("redbg");

Чтобы использовать JQuery для изменения цвета фона строк, когда мне нужно.

К сожалению, он работает только с не 2n + 1 строками. Как перекрасить строки #DDDDDD?

Answer 1

Просто измените класс "redbg", чтобы добавить tr в начало:

tr.redbg {
    background-color: #FF6666;
}

Это происходит потому, что tr:nth-child(2n+1) более специфичен, чем .redbg, поэтому он переопределяет цвет фона, несмотря ни на что.Изменение этого значения на tr.redbg делает его таким же конкретным, поэтому класс redbg переопределит селектор :nth-child().

См. JsFiddle

Примечание для дальнейшего использования: Селектор tr.redbg должен быть определен после селектора tr:nth-child(2n+1), чтобы переопределить цвет фона.

Answer 2

Не используйте !important (как предлагает другой ответ)

Вместо этого сделайте свой селектор более конкретным.Добавить добавить что-то вроде

table tr.redbg { background-color: #FF6666; }

Вот отличная ссылка о расчете специфичности CSS.

Answer 3

Похоже, это как-то связано с правилами специфичности CSS.

Попробуйте изменить селектор на tr.redbg и посмотрите, работает ли он.

Answer 4

Что-то о tr:nth-child(2n+1), имеющем приоритет, потому что это более специфический селектор.

Измените другой на

tr.redbg {
  background-color: #FF6666;
}

и оно должно работать

Answer 5

Я думаю, вам нужно сделать свой класс redbg более явным, чем n-й дочерний элемент, чтобы переопределить его.

Может быть, что-то вроде (хотя я не проверял его, но вам следует начать):

.redbg, tr.redbg:nth-child(2n+1)
{
background-color: #FF6666;

}