1

2つの異なるa：link / a：visited / a：hoverタグを使用します。ただし、.panel内のリンクは、.footerからa：link / a：visitedを引き継ぎ、.panel rightからのみa：hoverを取得します。

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 */}
4

2 に答える 2

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 固有性があることを確認してください。

    于 2012-02-20T14:39:36.570 に答える
    0

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

    .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>
}
    于 2012-02-20T14:31:54.437 に答える