为选定的<li>项目/覆盖<ul>样式</ul> </li>添加颜色

时间:2010-03-29 19:54:07

标签: html css

我有导航,我需要为所选项目设置颜色。它是平坦的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>手动设置它。

2 个答案:

答案 0 :(得分:2)

只使用“平面”HTML和CSS,这是无法做到的。您可以通过插入一些服务器端代码将“当前”类添加到当前导航项来实现此目的,或者您可以通过比较window.locationhref链接来使用JavaScript。

答案 1 :(得分:0)

要找出特定元素从哪个元素继承其样式,请打开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 */
}