Question

我知道这是一个愚蠢的问题，但由于某些原因，我总是遇到更改所选导航项目背景颜色的问题，我看了很多次，我尝试为按钮选择所选类由于某种原因，它对我不起作用，有人可以指出我做错了什么吗？

HTML：

<div id="nav">
    <ul>
        <li><a class="selected" href="?page=home">Home</a></li>
        <li><a href="?page=work">Gallery</a></li>
        <li><a href="?page=about">About</a></li>
        <li><a href="?page=contact">Contact</a></li>
        <li><a href="?page=shop">Shop</a></li>
    </ul>
</div>

的CSS：

#nav {
    list-style: none;
    width: 100%;
    text-align: center;
    background-color: #000;
    height:52px;
    background-color: #000; opacity: 0.7; filter: alpha(opacity=50);


}

#nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 10px;  
    padding-left: 650px;

}

#nav li {
    margin: 0px;
   display: inline-block;
}

#nav li a {
    padding: 10px;
    text-decoration: none;
    font-family: 'Quicksand';
    font-size: 25px;
    color: #fff;
    background-color: #000;

}

#nav li a:hover {
    color: black;
    background-color: #999;
    background-color: #666;
    color: white;
}
li.selected a { background-color: blue;
}

Answer 1

你在这里有两个问题。

您正在使用li.selected a但是您要将class分配给a代码，因此选择器应为li a.selected
特异性。您在所有选择器中都有#nav，因为ID选择器更具体，您还需要将其添加到.active选择器。所以它应该是#nav li a.selected

Demo

建议：

我建议您使用class代替id。为JavaScript选择器保留ID，因为它可以更快地访问您的DOM，但对于CSS，尽可能多地坚持使用类，否则您最终会得到长的特定选择器甚至!important。

所以你应该有类似<div id="nav" class="nav">的内容并在CSS中使用.nav而不是#nav

选择导航页面链接改变颜色的简单方法？

1 个答案: