簡單的方法使選定的導航頁面鏈接更改顏色？

我知道這是一個愚蠢的問題，但由於某種原因，我總是遇到改變選定導航項的背景顏色的問題，我查了很多次，我試着做選擇類的按鈕，但爲有些理由不適合我，有人能指出我做錯了什麼嗎？簡單的方法使選定的導航頁面鏈接更改顏色？

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

來源

2017-02-20 SadUnicorn

了'selected'類不上'li'，更改爲'李a.selected' – pol

你在這裏已經兩個問題。

您正在使用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

來源

2017-02-20 19:55:39

簡單的方法使選定的導航頁面鏈接更改顏色？

回答

相關問題