Question

我正在努力让这个简单的水平导航菜单工作，但是当我去为活跃的li添加“活动”类时，没有任何改变。 .active只是没有出现？我做错了什么人？

<div id="nav">
    <ul>
        <li class="active"><a href="#">All</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Technology</a></li>
        <li><a href="#">Referral</a></li>
        <li><a href="#">Reseller</a></li>
    </ul>

</div>

这是CSS：

    #nav ul{
        list-style-type:none;
        margin:40px auto;
        padding:0;
        width:625px;
        height:50px;
    }
#nav li{
display:inline;
    }
    #nav li a,
    #nav li a:visited,
    #nav li a:link {
        width:120px;
        height:20px;
        display:inline;
        float:left;
        text-align: center;
        padding-top:5px;  
        padding-bottom: 5px;
        margin-top:auto;
        margin-bottom:auto;
        font-family: arial;
        text-decoration: none;
        color:#929292;
        font-weight: bold;
        background-color: #e5e5e5;
        margin-left:5px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }
    #nav li a{

    }
    #nav li a:hover{
        color: #ffffff;  
        cursor: pointer;  
        background-color: #2F5290;
    }
    #nav li a:active{
        color: #FAAF31;  
    }
    .active{
        background-color: #2F5290;
        color: #FAAF31;  
    }

Answer 1

特异性是你的问题。简而言之：ID值100，类值10，元素值1，因此#nav li a值得102点特异性，但.active仅值10点。如果您将其更新为#nav li a.active，您将获得112分，因此具有足够的特异性来覆盖您的原始样式。您可以阅读有关specificity on W3C

的更多信息

感谢@setek提供了很好的答案，我认为这应该是答案，并且还增加了一点。

“选定”导航菜单出现问题

1 个答案: