CSS Issue - активное состояние для элемента навигации

Question

На следующем тестовом сайте (http://tronitech.brettatkin.com/index.asp), Я хочу, чтобы каждый элемент навигации имел разный вид, когда он является активной страницей.

Я назначил класс для элемента привязки, когда эта страница активна.

Когда я добавляю CSS inline, он работает (например, домашняя страница), но когда я добавляю его в класс, это не так.

Вот мой CSS:

#navigation ul li .active-link a {
    color: #326ea1;
    background-image: url(/images/nav-current.jpg);
    background-repeat: repeat-x;
}

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

Спасибо

Бретт

Answer 1

Измените ваш селектор на следующее

#navigation ul li a.active-link

a .active-link пытается сопоставить тег привязки с дочерним классом класса active-link.a.active-link соответствует тегам привязки с классом active-link.

Answer 2

это не #navigation ul li .active-link a, но должно быть #navigation ul li a.active-link. Первое правило говорит, что ссылка является потомком класса active-link, а второе - ссылка с классом active-link - это то, что у вас есть в разметке.

На самом деле оба селектора слишком длинные.