Цвет текста ссылки с «активным» классом

Question

У меня есть панель навигации, и мне нужна активная страница, отмеченная «субактивным» классом на элементе li, чтобы иметь белый текст вместо черного. HTML и CSS можно найти здесь: http://jsfiddle.net/a4hBz/

Я использую цвет в .subactive селекторе в CSS, но его игнорирует браузер.

Answer 1

Это в значительной степени из-за того, как CSS "весит" стили. Идентификаторы всегда имеют большее количество утверждений по имени стандартного тега, имени класса или псевдокласса. Простое решение должно быть специфичным с вашим классом привязки, применяя стиль «Активный», как и вы, с остальными стандартными элементами. В основном:

.subactive a 

должны стать

#sidenav .subactive a 

Если это не работает для вашей схемы, вам необходимо либо обратиться #sidenav в к классу, или обходным это какой-то другой способ.

---

Кстати, то, что я имел в виду ранее это стиль specificity-х. В настоящее время он стоит, ваши стили весят примерно так:

#sidenav a    a=0, b=1, c=0, d=1 -> specificity = 0,1,0,1 
.subactive a   a=0, b=0, c=1, d=1 -> specificity = 0,0,1,1 
#sidenav .subactive a a=0, b=1, c=1, d=1 -> specfiicity = 0,1,1,1 

Почти думать об этом так:

(a * 1000) + (b * 100) + (c * 10) + d 

стиль с наибольшим количеством побед.

Answer 2

Либо добавить !imporatant:

.subactive a 
{ 
    color: #fff!important; 

    /**/ 

} 

Или увеличить specificity из определения:

http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 3

Я бы не использовал важный, если мне не нужно.

Чтобы заставить его работать, я бы заменить строку

#sidenav a:hover, .subactive a 

в

#sidenav a:hover, #sidenav .subactive a:link 

и удалить код, ниже которого, кажется, не использовать

.subactive a 
{ 
    color: #fff; 
    background-color: #034676; 
} 

Проверьте рабочий пример на http://jsfiddle.net/a4hBz/1/