0

这是我的 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;
}

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

普通链接

链接栏

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

错误的

链接条码：

<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（访问的链接是白色的）。

谁能看到我做错了什么/指出如何解决它的方向？

4

1 回答 1

2

在你写的地方.linkbar a:link,a:visited你需要重复之前的类名a:visited

现在您实际上是在说“.linkbar 链接，然后覆盖所有 a:visited”

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

于 2013-03-23T14:00:31.953 回答