麻煩：訪問的僞類...儘管在css中有不同的顏色，但「被訪問」後所有鏈接都顯示爲相同的顏色

Question

我遇到了麻煩：a visited：（或其中一個可能？）僞類。我想讓鏈接在不同的元素中顯示爲不同的顏色（無論是否曾經訪問過，鏈接框中的黑色和＃主菜單中的紅色），他們首先執行此操作，但一旦它們「訪問過「鏈接，它們都是相同的顏色（紅色）。

任何想法我在這裏做錯了嗎？

.link-box { 
 

 
    background-color: blue; 
 

 
    
 
} 
 

 
.link-box a:link, 
 

 
a:visited, 
 

 
a:active { 
 

 
    color: black; 
 

 
    padding-left: 10px; 
 

 
    font-weight: bold; 
 

 
} 
 

 
.link-box a:hover { 
 

 
    color: #D31900; 
 

 
    text-decoration: none; 
 

 
} 
 

 

 
#main-menu { 
 

 
    height: 60px; 
 

 
    background-color: black; 
 

 
} 
 

 
#main-menu a:link, 
 

 
a:visited, 
 

 
a:active { 
 

 
    color: red; 
 

 
    text-transform: uppercase; 
 

 
} 
 

 
#main-menu a:hover { 
 

 
    color: #FF6600; 
 

 
}

<div class="link-box"> 
 

 
<a href="">Link box link</a> 
 

 
</div> 
 

 

 
<div id="main-menu"> 
 

 

 
    <a href="">main menu link</a> 
 
    
 

 
    
 
</div>

Answer 1

的a:僞類級聯的順序很重要。

傳統的記憶記住其中以風格的a:僞類是：

愛恨

即。鏈接，訪問，懸停，主動

重新排列你的樣式，像這樣：

.link-box a:link, 
.link-box a:visited { 
    color: black; 
    padding-left: 10px; 
    font-weight: bold; 
} 

.link-box a:hover { 
    color: #D31900; 
    text-decoration: none; 
} 

.link-box a:active { 
    color: black; 
    padding-left: 10px; 
    font-weight: bold; 
} 


#main-menu a:link, 
#main-menu a:visited { 
    color: red; 
    text-transform: uppercase; 
} 

#main-menu a:hover { 
    color: #FF6600; 
} 

#main-menu a:active { 
    color: red; 
    text-transform: uppercase; 
}