链接的颜色并不总是正确显示

Question

这是我的CSS：

/* Navigation Bar */
#linkBar
{
    position: relative; 
    overflow: hidden; 
    height:24px;
    width:999px;
    background:#990033;
}

.linkbar ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
.linkbar li
{
    float:left;
}
.linkbar a:link,a:visited
{
    font-size: 14px;
    display:block;
    width:134px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#990033;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
.linkbar a:hover,a:active
{
    background-color:#000000;
}

/* Links */
a:link,a:visited,a:active
{
    font-size: 8pt;
    font-weight:bold;
    color:#990033;
    text-decoration:underline;
}
a:hover
{
    color:#0000FF;
    text-decoration:none;
}

我的预期结果是链接显示如下：

大多数元素的情况都是如此，但链接栏上的第一个链接最终如下：

Linkbar代码：

<div id="linkBar" class="linkbar">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="course.php">Course</a></li>
        <li><a href="help.php">Help</a></li>
    </ul>
</div>

我为此做了jsfiddle （在jsfiddle上我没有得到链接栏中第一个链接的问题，所以这意味着我的代码的其余部分出了问题？）。

如果我只是将css更改为：

，我可以使用导航栏解决问题

#linkBar
{
    position: relative; 
    overflow: hidden; 
    height:24px;
    width:999px;
    background:#990033;
}

/* Links */
a:link,a:visited,a:active
{
    font-size: 8pt;
    font-weight:bold;
    color:#990033;
    text-decoration:underline;
}
a:hover
{
    color:#0000FF;
    text-decoration:none;
}
/* Navigation Bar */
.linkbar ul
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}
.linkbar li
{
    float:left;
}
.linkbar a:link,a:visited
{
    font-size: 14px;
    display:block;
    width:134px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#990033;
    text-align:center;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}
.linkbar a:hover,a:active
{
    background-color:#000000;
}

但这意味着访问过的普通链接文本颜色是白色 - 这不是我想要的（因为一些普通链接在浅色或白色背景上）。

我为此制作了jsfiddle（访问过的链接为白色）。

任何人都可以看到我做错了什么/指向我如何解决它？

Answer 1

您撰写.linkbar a:link,a:visited的位置需要在a:visited

之前重复该类名称

现在你实际上在说'.linkbar链接，然后覆盖所有a：visited'

所以它应该是.linkbar a:link, .linkbar a:visited { .. }