html - "selected"导航菜单有问题

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 的好回答，我认为这应该是真正的答案并添加了一点。