Question

我的导航栏出现问题。我希望它在访问链接后显示不同的颜色。我从代码学院，Stack O / F和其他网站上读到一个答案，说“伪class_selector必须按照以下顺序才能工作。：链接：参观：hover“（codeacademy-由Samrudhi Sharma提交）。我试过这个，但没有发生任何事情。我现在真的很困惑。感谢你的帮助。我的代码：

#nav {
    width:100%;
    float: left;
    margin: 20px;
    padding: 0;
    border-top: 5.5px solid red;
        border-bottom: 5.5px solid red;  
        line-height: 1.8em; 
        display:inline-block;
    clear:both;
 }

#nav ul {
    float: left;
    margin: auto;
    width: 1024px;
    margin:0px;
    list-style: none;
 }  

#nav ul li {
    color: orange;
    font-size:1.5em;
    float: left;
    width: 150px;
    padding: 0px;
    margin:0px;
    list-style:none;

}

#nav ul li a {
    border-left:1px solid #fff;
    text-align:center;
    display: block;
    width: auto;
    height: 25px;
    text-decoration: none;
}

#nav ul li:visited a{
    background:yellow;
    color:#FFFFFF;
    text-decoration:none;
}

#nav ul li:hover a{
    background:#C60;
    color:#FFFFFF;
    text-decoration:none;
}

Answer 1

将a:visited放在<a>上。

有一个小提琴 - Fiddle link!（如果黄色不渲染，请点击jsfiddle标题中的“运行”。）

CSS

#nav li a:visited  {
    background:yellow;
    color:#F00;
    text-decoration:none;
}

Answer 2

你应该在你的锚上使用伪类，而不是在list元素上。所以a:visited代替li:visited，因为您访问了锚点的链接，而不是列表元素;）

导航栏访问选择器不改变颜色

2 个答案: