錯誤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> 
}