CSS! Важно не иметь приоритета?

Question

У меня есть следующий Dóm структуру:

<div class="ui-tabs"> 
<ul> 
    <li class="ui-state-default ui-tabs-selected ui-state-active"> 
     <a href="#">Text</a> 
    </li> 
</ul> 

И следующий CSS разметка:

.ui-tabs .ui-state-active { 
background: #084; 
color: #E6EFEA !important; 
} 

a:link { 
color: #00C; 
} 

Я не могу получить первый цвет (E6EFEA) взять верх. Я пробовал его в FireFox и Chrome, Chrome даже показывает свойство a: link, поцарапанное ... как если бы какой-то другой цвет имел приоритет, но все равно отображает синий (00C). Просто чтобы убедиться, что я взял все остальные # 00C refeence в файле CSS. Есть идеи?

Я также выставил грубый пример на JSBin.

Answer 1

!important работает только тогда, когда атрибут применяется к одному и тому же элементу. В этом случае вы применяете его к родительскому элементу <a>, а его -, установленный там (выведите текст за пределами <a>, чтобы убедить себя).

Если вы хотите переопределить цвет самого элемента <a>, ваше правило CSS должно применяться к <a>, а не к предку.

Answer 2

.ui-tabs .ui-state-active a:link { 
color: #E6EFEA !important; 
} 

Это должно сделать это.

Вам необходимо установить цвет в теге, а не в класс .ui-state-active.

Answer 3

Вы должны также указать: ссылку

.ui-tabs .ui-state-active:link { 
    background: #084; 
    color: #E6EFEA !important; 
} 

Answer 4

Таким образом, вы окрашивать точку из списка ...

попробовать этот код:

.ui-tabs .ui-state-active a { 
    background: #084; 
    color: #E6EFEA; 
}