遇到“選定”導航菜單的問題

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分，因此具有足夠的特異性可以覆蓋您的原始樣式。 您可以閱讀有關W3C特異性的更多信息

感謝@setek的好答案，我認為這應該確實是答案，並且還增加了一點。