Question

您好我有一些HTML和CSS在我的屏幕上创建<ul>。这些项目是指向该网站上其他页面的链接。我希望列表中的项目通常为黑色，如果悬停在上面则为浅灰色，如果是用户所在的屏幕则为浅灰色。

以下是主屏幕上<ul>的HTML。在主屏幕上，列表项“Home”应该是浅灰色，而所有其他项目应该是黑色的，除非盘旋在上面。

<div id="navmenu">
    <ul>
        <li><a class="selected" href="index.html">Home</a></li>
        <li><a href="research.html">Research</a></li>
        <li><a href="cv.html">CV</a></li>
        <li><a href="links.html">Links</a></li>
    </ul>
</div>

我的CSS表是：

#navmenu {
    margin: auto;
}

#navmenu ul {   
    text-align:center;
}


#navmenu ul li {
    display:inline;
    padding-left:25px;
    padding-right:25px;
}


#navmenu ul li a {
    color:#000000;
}

#navmenu ul li a:hover {
    color:#F2F2F2;
}

#navmenu ul li a:selected {
    color:#F2F2F2;
}

链接是黑色的，这很好。当我将鼠标悬停在它们上面时，它们也会变成浅灰色，这很棒。但每当我选择其中一个项目进入页面时，我无法获得我当前所处的链接为浅灰色。这也适用于主页 - 每当我转到第一页时，“Home”项目都是黑色的。

谁能看到我在这里做错了什么？任何帮助表示赞赏。

Answer 1

你的意思是这样做：

#navmenu ul li a.selected {
    color:#F2F2F2;
}

请参阅：http://jsfiddle.net/audetwebdesign/nSgDf/

目前CSS2或CSS3中没有:selected伪类。

应用.selected类来表示用户正在访问的当前页面。

参考：http://www.w3.org/TR/css3-selectors/#pseudo-classes

HTML a，a：悬停工作，但a：选中不是

1 个答案: