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 link」と言ってから、すべてのa：visitedをオーバーライドします

だからそれは.linkbar a:link, .linkbar a:visited { .. }

于 2013-03-23T14:00:31.953 に答える