Мой класс отказывается применять свои правила к спискам

Question

У меня есть класс .active, который нужно применить к li a для текущей страницы.

Но он продолжает переопределяться моим стилем nav div.

#nav ul li a:link, #nav ul li a:visited {
    color: #BBBBBB;
}

#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
    border-bottom: red solid 2px;
    padding-bottom: 4px;
    color: #fff;
}

Я попробовал несколько вариантов второго правила, чтобы попытаться свергнуть первое, но, похоже, ни одно из них не работает.(У меня изначально не было идентификатора, но я знаю, что идентификатор - это шаг над классом в каскаде).Может быть, я упускаю что-то действительно простое, или, может быть, мое первое правило глупо из-за конкретного?(Мне всегда кажется, что я сталкиваюсь с такой проблемой со ссылками, в частности)

Answer 1

Предполагая, что у вас есть разметка, как это:

<div id="nav">
  <ul>
    <li><a href="#">foo</a></li>
    <li><a href="#">foo</a></li>
    <li class="active"><a href="#">foo</a></li>
  </ul>
</div>

Ваш CSS работает нормально.

См. http://jsfiddle.net/X7eAw/1/

Возможно, вам понадобится добавить

#nav ul li.active a

для определения специфичности, если класс active не применяется. Однако этот селектор, вероятно, излишний.

при условии , что у вас есть active класс для вашего li элемента. Если вы применяете active к якору, тогда правило должно быть: #nav ul li a.active:link

Answer 2

Вы можете предотвратить переопределение стиля в CSS, используя! Важный тег:

#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
    border-bottom: red solid 2px;
    padding-bottom: 4px;
    color: #fff !important;
}