在css中顯示隨機顏色的列表項目

-1

嘗試構建高校作業網站的總noob。我看它除了導航菜單外我想要的方式。我想將鏈接設置爲某種顏色，然後更改「懸停」的顏色，將其重新更改爲「有效」，然後再次更改爲「已訪問」。 '懸停'和'主動'命令的效果很好，但如果我激活'visited'命令，它似乎只是使鏈接變成彩色，然後註釋掉鏈接變成一種我甚至都沒有指定的紫色。我不知道這怎麼可能。 HTML：在css中顯示隨機顏色的列表項目

<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>home</title> 
    <style> 
    </style> 
    <link href="style/homeContent.css" rel="stylesheet" type="text/css"> 
    </head> 
    <ul class="nav"> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#portfolio">Portfolio</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    </body> 
</html>

CSS：

body 
{ 
    background-color: #1B1716; 
} 

.nav 
{ 
    font-family: source-sans-pro; 
    font-size: 20px; 
    padding-left: 200px; 
    margin: 0; 
    text-align: center; 
    width: 100%; 
    max-width: 1000px; 
} 
.nav li 
{ 
    display: inline; 
} 
.nav a 
{ 
    display: inline-block; 
    padding: 100px; 
    text-decoration: none; 
} 
.nav a:link 
{ 
    color: #E4E4E4; 
} 
.nav a:hover 
{ 
    color: #FFFFFF; 
    text-shadow: 0px 0px 15px #FFFFFF; 
} 
.nav a:visited 
{ 
    color: #CDCDCD; 
} 
.nav a:active 
{ 
    color: #C60003; 
}

感謝您的幫助！

來源

2016-12-04 Brian

我實在看不出你的問題，你想要的'什麼風格：鏈接的visited'版本？此外，紫色文本是瀏覽器默認 – Isigiel

感謝您回答Isigiel，我不知道紫色是瀏覽器默認。我認爲它是全面的，因爲它發生在鉻，Safari和Firefox。如果是這樣，這意味着我的.nav a：link {color：＃E4E4E4;}被完全忽略。訪問應該只發生在鏈接被點擊之後。 – Brian

看起來你的代碼是完全正確的，運行我做的代碼片段，在那裏我改變了顏色，所以你可以看到哪些線被應用，現在鏈接是藍色的，然後在你懸停時變爲白色，點擊時變爲紅色，點擊後綠色。

你提到的紫色是瀏覽器的默認設置，只適用於所有訪問過的鏈接。

body 
 
{ 
 
    background-color: #1B1716; 
 
} 
 

 
.nav 
 
{ 
 
    font-family: source-sans-pro; 
 
    font-size: 20px; 
 
    padding-left: 200px; 
 
    margin: 0; 
 
    text-align: center; 
 
    width: 100%; 
 
    max-width: 1000px; 
 
} 
 
.nav li 
 
{ 
 
    display: inline; 
 
} 
 
.nav a 
 
{ 
 
    display: inline-block; 
 
    padding: 100px; 
 
    text-decoration: none; 
 
} 
 
.nav a:link 
 
{ 
 
    color: green; 
 
} 
 
.nav a:hover 
 
{ 
 
    color: #FFFFFF; 
 
    text-shadow: 0px 0px 15px #FFFFFF; 
 
} 
 
.nav a:visited 
 
{ 
 
    color: blue; 
 
} 
 
.nav a:active 
 
{ 
 
    color: #C60003; 
 
}

<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>home</title> 
 
    <style> 
 
    </style> 
 
    <link href="style/homeContent.css" rel="stylesheet" type="text/css"> 
 
    </head> 
 
    <ul class="nav"> 
 
     <li><a href="#home">Home</a></li> 
 
     <li><a href="#portfolio">Portfolio</a></li> 
 
     <li><a href="#contact">Contact</a></li> 
 
    </ul> 
 
    </body> 
 
</html>

來源

2016-12-04 13:31:58 Isigiel

再次感謝Isigiel，你的代碼工作非常好。不過我想我已經知道發生了什麼事情：基本上，一旦你點擊鏈接，a：visited部分就會無限期地接管，即使你刷新頁面。但是，如果我退出瀏覽器並重新啓動整個事物，則鏈接顏色會回到默認值，直到您點擊它爲止。這也發生在你的代碼中。無論如何，我現在可以處理這個問題，但這並不是高優先級。非常感謝你的幫助！ – Brian

訪問過的鏈接取決於您的瀏覽器歷史記錄，因此它們可能會以不同方式顯示給所有人。有些瀏覽器會在您每次關閉它時重置此設置，其中一些瀏覽器會讓它們「訪問」，直到您清除歷史記錄。 – Tremors

在css中顯示隨機顏色的列表項目

回答

相關問題