間違ったA：使用されているリンクタグ（Chrome）

Question

2つの異なるa：link/a：visited/a：hoverタグ..しかし、.panelのリンクがa：link/aを引き継ぎます。

HTML

<div class="panel" id="tab4"><b><a href="#" target="_blank">Title</a> – Name</b>

CSS

.panel a:link, a:visited {
color:#333;
text-decoration:none;}

.panel a:hover {
color:#000;
text-decoration:none;
border-bottom:1px solid #000;}

.footer a:link, a:visited {
color:#fff;
text-decoration:none;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */}

.footer a:hover {
color:#fff;
text-decoration:none;
border-bottom:1px solid #fff;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */}

Answer 1

CSSルールは、ブラウザの右から左から下まで解析されるコンマ区切りリストです。次のことをするとき：

.panel a:link, a:visited{
    /*things*/
}

.footer a:link, a:visited {
    /*more things*/
}

ブラウザは言っています：

「わかりました、ステップ1、 anchor それはそうです visited, 、これらのルールを行います。次に、 anchor link のクラスで panel, 、これらの同じルールを行います。」

「任意のためにステップ2に anchor それはそうです visited, 、これらの2番目のルールを実行します{ステップ1を書きすぎて}、そして class の footer, 、これらの2番目のルールを再度行います。」

だから、十分であることを確認してください CSS特異性 あなたがターゲットにしようとしているものを正しくターゲットにします。

Answer 2

あなたは宣言します a:visited 2回、後者は最初の値の値を上書きします。

.panel a:link, .panel a:visited {
    color:#333;
    text-decoration:none;
}

.footer a:link, .footer a:visited {
    color:#fff;
    text-decoration:none;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}

これはおそらくあなたが探しているものです。カンマ削除されたターゲットを指定できますが、それぞれが完全に指定されている必要があります。それ以外の場合は、次のように読みます。

.footer a:link {
    <declarations>
}
a:visited {
    <declarations>
}