我在使用 a:visited(或另一个可能?)伪类时遇到问题。我想让链接在不同的元素中显示为不同的颜色(.link-box 中的黑色和#main-menu 中的红色,无论它们是否被访问过),他们首先这样做,但是一旦他们“已访问”链接,它们都是相同的颜色(红色)。
知道我在这里做错了什么吗?
.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>
最佳答案
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;
}
关于css - :visited pseudoclass. 的问题 .. 尽管在 css 中有不同的颜色,但链接在 "visited"之后都显示为相同的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34623869/