2

ユーザーがそのページにいるときに、ナビゲーション バーのテキストに別の色を表示して、ユーザーがどこにいるかがわかるようにしたいと考えています。1 つのページだけですべてのブラウザーでこれを機能させることができますが、子ページで作業を開始すると、おかしなことになります。Chrome では親ページのプレースホルダー リンク (active4) が応答しますが、すべての子ページ (active4a-c) も応答します。IE と Mozilla の両方で、個々の子ページ (active4a) は応答しますが、親ページ (active4) は応答しません。これらのクラスの CSS は内部スタイル シートにあるため、ページを離れると、リンクは外部スタイル シートのスタイルに戻ります。

  <li class="active4" ><a href="#" >Reviewers</a>
        <ul>
        <li class="active4a"><a href="reviewers.html">Reviewer Information</a></li>
        <li class="active4b" ><a href="#" >How</a></li>
        <li class="active4c"><a href="#" >Future</a></li>
    </ul>
  </li>

.active4 a:visited {
    color:#6206F7;
}
.active4a a:visited {
    color:#6206F7;
}
4

1 に答える 1

1

:visited 疑似セレクターはあなたが望むものではないと思います。これにより、<a>一度でもアクセスされた後にタグが選択されます。したがって、訪問者がリンクをクリックすると、常に新しい色になります。代わりに、子要素activeのみを選択するクラスを作成してみてください。<a>ここにいくつかの作業コードがあります:

<!doctype html>
<html>
    <head>
        <style>
            a:link {
                color:blue;
            }
            a:visited {
                color:blue;
            }
            .active > a:link {
                color:red;
            }
            .active > a:visited {
                color:red;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="active" ><a href="#" >Reviewers</a>
                <ul>
                    <li class="active"><a href="reviewers.html">Reviewer Information</a></li>
                    <li><a href="#" >How</a></li>
                    <li><a href="#" >Future</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>

1 つ指摘したいのは、との>間です。これにより、 の子であるタグのみが選択されます。これを省略すると、以前に発生していた問題につながるすべての子孫が選択されます。.activea:link<a>.active

于 2013-11-09T04:03:47.763 に答える