CSS导航栏当前页面颜色更改

Question

我试图制作它以便我可以为当前页面的链接添加一个类，并且背景将保持填充蓝绿色（就像它在悬停时一样）

然而，就目前而言，链接文本仍然显示在蓝绿色（图片第1部分）中，即使css表示显示为白色（图片第2部分）

我拥有的CSS是：

#nav a:link, a:visited {
    font-weight: bold;
    color: #066;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    text-transform: uppercase;
}
#nav a:hover, a:active {
    display: block;
    background-color: #066;
    color: #fff;
}
#nav a.selected:link, a.selected:active{
    display: block;
    background-color: #066;
    color: #fff;
}

#nav a.selected:hover, a.selected:active {
    display: block;
    background-color: #066;
    color: #fff;
}

html是

<div id="nav">
                <ul>
                    <li ><a href="" class="selected">HOME</a></li>
                    <li><a href="">ABOUT</a></li>
                    <li><a href="">SOLUTIONS</a></li>
                    <li><a href="">CONSULTANCY</a></li>
                    <li><a href="">SUPPORT</a></li>
                    <li><a href="">CONTACT US</a></li>

            </ul>
            </div>

当我在firefox中检查元素时，它显示颜色应为白色。所以它应该正确显示，但事实并非如此。知道我做错了什么吗？我已经清除了缓存并且没有对它进行排序。

Answer 1

更改此

#nav a.selected:link, a.selected:active {  

到这个

#nav a.selected:link, a.selected:visited{

FIDDLE

您尝试将活动设置为两次。

Answer 2

您已为selected项目设置了所有状态，但不是默认状态，只需为没有状态的项目添加选择器：

  

#nav a.selected，#nav a.selected：link，a.selected：active

＆＃13;

＆＃13;

#nav a:link,
a:visited {
  font-weight: bold;
  color: #066;
  text-align: center;
  padding: 8px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover,
a:active {
  display: block;
  background-color: #066;
  color: #fff;
}
#nav a.selected, #nav a.selected:link,
a.selected:active {
  display: block;
  background-color: #066;
  color: #fff;
}
#nav a.selected:hover,
a.selected:active {
  display: block;
  background-color: #066;
  color: #fff;
}

＆＃13;

<div id="nav">
  <ul>
    <li><a href="" class="selected">HOME</a>
    </li>
    <li><a href="">ABOUT</a>
    </li>
    <li><a href="">SOLUTIONS</a>
    </li>
    <li><a href="">CONSULTANCY</a>
    </li>
    <li><a href="">SUPPORT</a>
    </li>
    <li><a href="">CONTACT US</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

:active是state但:link不是。链接是指锚点的attr所以

更改

#nav a.selected:link, a.selected:active

到

#nav a[href].selected, a.selected:active

#nav a:link, a:visited {
    font-weight: bold;
    color: #066;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    text-transform: uppercase;
}
#nav a:hover, a:active {
    display: block;
    background-color: #066;
    color: #fff;
}
#nav a[href].selected, a.selected:active{
    display: block;
    background-color: #066;
    color: #fff;
}

#nav a.selected:hover, a.selected:active {
    display: block;
    background-color: #066;
    color: #fff;
}

<div id="nav">
    <ul>
        <li ><a href="" class="selected">HOME</a></li>
        <li><a href="">ABOUT</a></li>
        <li><a href="">SOLUTIONS</a></li>
        <li><a href="">CONSULTANCY</a></li>
        <li><a href="">SUPPORT</a></li>
        <li><a href="">CONTACT US</a></li>
     </ul>
</div>

Answer 4

试试这个：

只需使用#nav a.selected:link, a.selected:active更改此css #nav a.selected, a.selected:active，您的问题就会解决