Question

我使用两个不同的a：link / a：visited / a：hover tags ..但是.panel中的链接接管a：link / a：从.footer访问并且只获取a：hover from .panel right

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

浏览器说：

“好的，第一步，对于任何anchor visited，执行这些规则。然后对于任何类{{1}的anchor link ，做同样的规则。“

“在第2步，对于任何panel anchor，执行第二条规则{在写第一步}，以及visited {{1}再次执行这些第二条规则。“

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

Answer 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>
}

错误的a：正在使用的链接标记（Chrome）

2 个答案: