2

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

这是<ul>主屏幕上的 HTML。在主屏幕上，列表项“主页”应为浅灰色，而所有其他项应为黑色，除非将鼠标悬停在上面。

<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;
}

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

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

4

1 回答 1

3

你的意思是这样做：

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

见：http: //jsfiddle.net/audetwebdesign/nSgDf/

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

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

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

于 2013-09-01T21:36:51.700 回答