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

Question

我使用两个不同的a：link/a：visited/a：hover标记..但.panel中的链接接管a：link/a：从.footer只有从.panel右边悬停：。

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，做这些规则，那么对于一类panel任何anchor link，遵守这些相同的规则。“

“关于第二步，对于任何anchor这是visited，做这些第二个规则{写在你的第一步}，并为任何与classfooter，再次做这些第二条规则。”

因此，请确保您有足够的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> 
}