1

我使用了两个不同的 a:link/a:visited/a:hover 标签。但是 .panel 中的链接接管了 .footer 中的 a:link/a:visited 并且只从 .panel 中获取了 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*/
}

浏览器说：

  • “好的，第一步，对于任何anchor是visited，执行这些规则。然后对于任何anchor link一个类panel，执行相同的规则。”
  • “在第二步，对于任何anchor是visited，执行这些第二条规则 {over write your step one}，对于任何带有classof的东西，footer再次执行这些第二条规则。”

    • 因此，请确保您有足够的CSS 特异性来正确定位您要定位的内容。

    于 2012-02-20T14:39:36.570 回答
    0

    您声明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 回答