在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中显示随机颜色的列表项目

回答

相关问题