Question

我为eBay项目描述标题提供了以下代码，当我将其放入(here)时它看起来很好，但链接会在列表预览(here)中更改颜色。

我需要更改什么才能使链接保持黑色？

提前致谢

以下代码：

CSS代码

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<title>DR Automation</title>
<style type="text/css">
.main {
font-family: 'Source Sans Pro', sans-serif;
font-size: 14px;
font-weight: normal;
background-color: #fff;
}
a {
color: #000000;
text-decoration: none;
}
a:focus, a:hover {
color: #cc0000;
text-decoration: none;
}
.nav {
float: left;
line-height: 20px;
letter-spacing: 1px;
color: #000000;
height: 20px;
padding: 0;
margin: 0 15px;
cursor: pointer;
text-decoration: none;
}
ul {
padding: 0;
margin: 23px 0;
list-style: outside none;
}
li {
margin: 12px 0;
}
.header {
width: 100%;
height: 120px;
border-bottom: 1px solid #9b9b9b;
}
.logo {
float: left;
display: inline-block;
position: relative;
width: initial;
max-width: 200px;
max-height: 120px;
padding: 10px 20px 0px 0px;
margin: 0;
vertical-align: middle;
}
.navigation {
height: 120px;
float: left;
position: relative;
display: inline-block;
line-height: 120px;
vertical-align: top;
text-align: left;
}
.list {
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
.item {
position: relative;
float: left;
padding: 20px 0;
margin: 30px 0;
vertical-align: middle;
display: inline;
}
.contact {
height: 80px;
float: right;
position: relative;
display: inline-block;
padding: 20px;
}
.contact-item {
position: relative;
float: left;
padding: 10px;
margin-top: 20px;
vertical-align: middle;
display: inline;
}
</style>

Html代码

<div class="main">
<div class="header">
<div class="logo">
<a href="https://www.drautomation.co.uk/" target="_blank"><img style="height: 110px;" alt="DR Automation" src="http://i.imgur.com/qqdzWy4.png"></a>
</div>
<div class="navigation">
<ul class="list">
<li class="item">
<a class="nav" href="https://www.drautomation.co.uk" target="_blank">Home</a>
</li>
<li class="item">
<a class="nav" href="/pages/about-us" target="_blank">About Us</a>
</li>
</ul>
</div>
<div class="contact">
<div class="contact-item">
<a href="https://www.drautomation.co.uk/" target="_blank">www.drautomation.co.uk</a>
</div>
<div class="contact-item">
<img height="10px" alt="Phone" src="http://i.imgur.com/jGuitJh.png">
01224 968070
</div>
<div class="contact-item">
<img height="10px" alt="Email" src="http://i.imgur.com/7rvGp17.png">
<a href="mailto: info@drautomation.co.uk">info@drautomation.co.uk</a>
</div>
</div>
</div>
</div>

Answer 1

当你为链接指定css时，如果你为所有的伪类添加css也会很好。

在你的情况下：

contact-item a,
contact-item a:visited,
contact-item a:hover,
contact-item a:active {
    color:black;
}

在此处阅读有关伪类的更多信息：http://www.w3schools.com/Css/css_pseudo_classes.asp

Answer 2

也将样式应用于a:visited链接。

链接颜色已更改，表示您已访问该链接下的该页面。

Answer 3

试试此代码

a, a:visited, a:active, a:hover{
color:#000000;
}

了解更多信息，请访问以下网址

http://www.w3schools.com/css/css_link.asp

易趣HTML项目描述在预览时看起来不同

3 个答案: