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，这是无法做到的。您可以通过插入一些服务器端代码将“当前”类添加到当前导航项来实现此目的，或者您可以通过比较window.location到href链接来使用JavaScript。

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 */
}

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

2 个答案: