Как я могу переопределить CSS?

Question

В следующем примере

http://jsfiddle.net/xBRPg/

Я пытаюсь создать желтый фон для одного из моих строк таблицы. Следующая строка кода

<table class="table table-bordered table-striped"> 

Кажется, заменяет мой собственный стиль. Если я удалю классы, строка будет желтой по желанию. Есть ли способ сохранить классы, но переопределить настройку, чтобы мой цвет занимал первостепенное значение?

Answer 1

Это происходит из-за специфики CSS - table.table-striped tr более конкретно, чем table tr. Более конкретные правила переопределяют менее конкретные. На мой взгляд, вы должны избегать !important как можно дольше, и вместо этого сосредоточьтесь на том, чтобы сделать ваши селекторы более конкретными. Поэтому в вашем случае сделайте это:

table.table-striped tr.zebraHover td { 
    background-color: #FFFACD; 
} 

Answer 2

Ряд является желтый цвет. Просто внутри ячеек есть # f9f9f9, поэтому вы не можете видеть цвет фона в строке.

Вам нужно сменить селектор, чтобы он соответствовал ячейкам в строке, а не самой строке. Вам также необходимо увеличить specificity селектора, поскольку те, которые используются уже, более конкретны, чем у вас есть.

Answer 3

Изменить это в CSS

tr.zebraHover td { 
      background-color: #FFFACD !important; 
} 

И да, я знаю, что это очень грязная. Если кто-то знает это лучше, прокомментируйте мой ответ. Я бы хотел знать лучшее решение!

Answer 4

Измените класс на id.

CSS:

#zebraHover td{ 
      background-color: #FFFACD; 
     } 

HTML

<tr id="zebraHover"> 
    <td>1</td> 
    <td>User1</td> 
    <td>user1@gmail.com</td> 
    <td><a class="btn btn-danger" href="#">Deactivate</a></td> 
</tr> 

http://jsfiddle.net/xBRPg/

Answer 5

Проблема вызвана правилом, установленным чередующиеся цвета фона строк с использованием селекторов с высокой специфичностью. Чтобы соответствующим образом их переопределить, используйте, например,

tr.zebraHover, 
    .table-striped tbody tr:nth-child(2n+1).zebraHover td 
    { 
     background-color: #FFFACD; 
    }