Question

我在网站主页www.speedy.net上设置CSS时遇到问题。我希望链接颜色为#146cc0，这在未访问链接时是正确的。但是当访问链接时，它会变为蓝色。我删除了a:visited的特定CSS，但我现在检查了4个浏览器（Chrome，Firefox，Opera和Edge），访问过的链接总是蓝色（不是#146cc0）。如何使访问过的链接与未访问的链接颜色相同？

这是主页的CSS：

html, body {
    margin: 0;
}

#top-gradient {
    height: 80px;
    background: url('/images/gradient.png');
    margin-bottom: 15px;
    background-repeat: repeat-x;
    width: 100%;
}

a:link {
    text-decoration: none;
    color: #146cc0;
    background-color: transparent;
    font-family: 'Arial';
}

a > span {
    color: black;
}

a:hover > span {
    color: #FF0000;
}

a:hover {
    color: #FF0000;
    background-color: transparent;
}

a:active {
    color: #990099;
    background-color: transparent;
}

td {
    padding: 0px 40px;
}

.wiki-link {
    font-size: 40px;
}

img.main-image {
    max-width: 100%;
}

.speedy-bottom-badge-link {
    font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    font-variant: normal;
    font-style: normal;
    font-weight: normal;
    color: #3B5998;
    text-decoration: none;
}

@media screen and (max-width: 1080px) {
    img.fb-badge {
        width: 30%;
        height: auto;
    }
    img.main-logo {
        width: 65%;
        height: auto;
    }
    .wiki-link {
        font-size: 60px;
    }
    .speedy-bottom-badge-link {
        font-size: 40px;
    }
}

这是我删除的CSS：

a:visited {
    text-decoration: underline;
    color: #0000CC;
    background-color: transparent;
}

谢谢，Uri。

Answer 1

在CSS链接伪类中，顺序很重要：

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}

链接，访问，悬停，活动

L，V，H，A

LoVe，HAte

如果你想让它们保持一致，你可以设置：

a {color: blue;}

Answer 2

好的，我发现了这个错误 - 我必须定义a而不是a:link。这是有效的CSS：

html, body {
    margin: 0;
}

#top-gradient {
    height: 80px;
    background: url('/images/gradient.png');
    margin-bottom: 15px;
    background-repeat: repeat-x;
    width: 100%;
}

a {
    text-decoration: none;
    color: #146cc0;
    background-color: transparent;
    font-family: 'Arial';
}

a > span {
    color: black;
}

a:hover > span {
    color: #FF0000;
}

a:hover {
    color: #FF0000;
    background-color: transparent;
}

a:active {
    color: #990099;
    background-color: transparent;
}

td {
    padding: 0px 40px;
}

.wiki-link {
    font-size: 40px;
}

img.main-image {
    max-width: 100%;
}

.speedy-bottom-badge-link {
    font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    font-variant: normal;
    font-style: normal;
    font-weight: normal;
    color: #3B5998;
    text-decoration: none;
}

@media screen and (max-width: 1080px) {
    img.fb-badge {
        width: 30%;
        height: auto;
    }
    img.main-logo {
        width: 65%;
        height: auto;
    }
    .wiki-link {
        font-size: 60px;
    }
    .speedy-bottom-badge-link {
        font-size: 40px;
    }
}

访问链接上的颜色不正确

2 个答案: