Добавить цвет к выбранному <li>элементу / переопределить <ul>стиль

Question

У меня есть навигация, для которой мне нужно установить цвет для выбранного элемента. Это плоский HTML и CSS.

Вот код меню:

 <ul id="top_navigation">
     <li class="border_red"><a href="index.html">Home</a></li>
     <li class="border_red"><a href="about.html">About</a></li>
     <li class="border_red"><a href="services.html"><font color="#cf3533">Services</font></a></li>
     <li class="border_red"><a href="careers.html">Careers</a></li>
     <li class="border_red"><a href="news.html">News</a></li>
     <li class="border_red"><a href="sitemap.html">Sitemap</a></li>
     <li><a href="contact.html">Contact</a></li>
 </ul>

А вот CSS - есть базовая настройка, а затем класс для помещения канала между элементами:

#top_navigation {
   width: 696px;
   margin: 0px;
   padding: 0 0 0 4px;
   list-style-type: none;
   overflow: hidden;
}

#top_navigation li {
   width: auto;
   height: 17px;
   margin: 0px;
   padding: 1px 10px 0 10px;
   float: left;
}

#top_navigation li a {
   margin: 0px;
   padding: 0px;
   display: block;
   font-size: 12px;
   text-align: center;
   text-decoration: none;
}

#top_navigation li a:hover {
   color: #cf3533;
}

Это устанавливает трубу справа.

.border_red {
   border-right: 1px solid #d7d7d7;
}

Я попытался скомбинировать их и создать стиль _selected, и канал показывается, но я не могу изменить цвет выбранного.

Я должен соответствовать приоритетам WCAG 1,2,3, поэтому я не могу просто установить его вручную с помощью <font>.

Answer 1

Только с «плоским» HTML и CSS это невозможно. Это можно сделать, вставив некоторый серверный код для добавления «текущего» класса к текущему элементу навигации, или вы можете сделать это с помощью JavaScript, сравнив window.location с href ссылок.

Answer 2

Чтобы узнать, откуда конкретный элемент наследует его стиль, откройте Firebug (Firefox) или Web Inspector (Safari), выберите элемент, и вы увидите список его стилей и их происхождение. Перезаписанные стили отмечены зачеркнутым текстом.

Примечание сайта: имя класса CSS должно указывать, что это за элемент, а не как он выглядит. Вместо повторения класса border_red рассмотрите следующую разметку:

<ul>
    <li class="first">...</li>
    <li>...</li>
    <li>...</li>
</ul>

С помощью CSS:

ul li {
    border-left: .1em solid red;
}

ul li.first {
    border-left: 0;
}

ul li:first-child {
    border-left: 0;  /* If support for ancient browsers is not needed */
}