使用了错误的 a:link 标签 (Chrome)答案

【问题标题】：Wrong a:link tag being used (Chrome)使用了错误的 a:link 标签 (Chrome)
【发布时间】：2012-03-10 21:09:50
【问题描述】：

我使用了两个不同的 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 */}

【问题讨论】：

标签： css google-chrome hyperlink hover visited

【解决方案1】：

你声明了两次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>
}

【讨论】：

【解决方案2】：

CSS 规则是一个逗号分隔的列表，由浏览器从右到左、从上到下解析。当您执行以下操作时：

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

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

浏览器说：

“好的，第一步，对于任何anchor，即visited，执行这些规则。然后对于任何具有panel 类的anchor link，执行同样的规则。”

“在第二步，对于任何anchor 即visited，执行第二条规则{在编写您的第一步}，以及对于footer 的class，再次执行第二条规则。”

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

【讨论】：