更改單個列表項的顏色

Question

有沒有在HTML/CSS中更改一個列表項的顏色而不是全部的方法？我只是想改變它們每個的顏色，以便用戶知道他在哪個頁面上。現在我只能做a:hover，但我無法弄清楚我該怎麼做才能保持顏色。

HTML：

<div id="nav"> 
    <div class="wrapper"> 
     <ul id="buttons"> 
     <li><a href="index.html">| About</a></li> 
     <li><a href="html/gallery.html">| Gallery</a></li> 
     <li><a href="html/prices.html">| Prices</a></li> 
     <li><a href="html/faq.html">| FAQ</a></li> 
     <li><a href="html/contact_us.html">| Contact Us</a></li> 
     <div class="clear"></div> 
     </ul> 
    </div> 
</div> 

CSS：

#buttons { 
background-color: black; 
} 

.clear { clear: both; } 

#buttons li a 
{ 
position:block; 
color:#fff; 
padding:1em; 
text-decoration:none; 
float:left; 
width:95px; 
} 

#buttons li a:hover 
{ 
background-color:#bc1b32; 
} 

Answer 1

最簡單的方法是隻創建一個類，可以說選擇，將它添加到你想改變顏色的標籤，這就是它：

.selected { background-color: green; } 

那麼你的鏈接將是：

<li><a class='selected' href="index.html">| About</a></li> 

Answer 2

我用這個答案具有良好的效果同樣的問題：http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

Answer 3

的問題是有點含糊;指示用戶是哪個頁面上，你可以添加一個類，裏面他們最後單擊鏈接特定列表項：

<li class="current"> 
    <a href="html/prices.html">| Prices</a> 
</li> 

然後，爲他們提供了特定的風格：

li.current { 
    background-color: #f1f1f1; 
} 

Answer 4

看：http://jsfiddle.net/qzXgJ/

詳細信息：

HTML

<div> 
    <div class="wrapper"> 
     <ul> 
     <li><a id="index" href="#">| About</a></li> 
     <li><a id="gallery" href="#">| Gallery</a></li> 
     <li><a id="prices" href="#">| Prices</a></li> 
     <li><a id="faq" href="#">| FAQ</a></li> 
     <li><a id="contact_us" href="#">| Contact Us</a></li> 
     <div class="clear"></div> 
     </ul> 
    </div> 
</div>​​​ 

JS

$(".wrapper li a").click(function() { 

    $('.wrapper li a').each(function() { 
     $(this).removeClass('selected'); 
    }); 

    $(this).addClass('selected'); 

    $(".wrapper ul li a").click(function() { 

    $('.wrapper ul li a').each(function() { 
     $(this).removeClass('selected'); 
    }); 

    $(this).addClass('selected'); 

    console.log($(this).attr('id')); 

    /* Get html by jQuery */ 
    $.get($(this).attr('id'),function(data){ 
     $('#result').html(data); 
    }); 

    return false; 
}); 

CSS

.selected 
{ 
    background-color:#b51ba2; 
}