Question

只試圖將類添加到當前頁的菜單項，以便用戶知道它當前處於哪個頁面。但背景圖像不會顯示。我申請的類的<a>，但我也把它添加到該<li>

<div id="menu"> 
        <ul id='foot'> 

         <li><a class="current" href='index.php'>Home</a></li> 
         <li><a href='article-list.php?article_type=test0'>Page 0</a></li> 
         <li><a href='article-list.php?article_type=test'>Page 1</a></li> 
         <li><a href='article-list.php?article_type=test2'>Page 2</a></li> 
         <li><a href='chic.php?page=blogs_full'>Page 3</a></li>      

        </ul> 


      </div> 

樣式表：

#menu{height:51px;width:900px;background-image:url(../NEW_images/menu_bg.jpg);background-repeat:repeat-x;} 
#menu ul{} 
#menu li {display:inline;font: 20px Verdana, Helvetica, sans-serif;margin: 0;padding: 0;} 
#menu a {background: url("../images/seperator.gif") bottom right no-repeat;color: #ccc;display: block;float: left;margin: 0;padding: 8px 20px;text-decoration: none;} 
#menu a:hover {background: #2580a2 url("../NEW_images/li_bg.jpg") bottom center repeat-x;color: #fff;padding-bottom: 8px;padding: 8px 20px;} 
.current{background: #2580a2 url(../NEW_images/li_bg.jpg) bottom center repeat-x;color: #fff;padding-bottom: 8px;padding: 8px 20px;} 
#page_num{width:100%; text-align:center; margin:40px 0 20px 0;} 

Answer 1

您需要限定您.current選擇與#menu a，否則它就會被覆蓋以前的選擇器，因爲.current單是不夠具體：

#menu a.current{background: #2580a2 url(../NEW_images/li_bg.jpg) bottom center repeat-x;color: #fff;padding-bottom: 8px;padding: 8px 20px;} 

你的CSS也可以使用更好的格式，這樣很難閱讀。

Answer 2

WordPress的已具有的功能，增加了current_page_item類當前菜單項，所以只需要添加像這樣的CSS：

.current_page_item { 
background-color:yellow; 
}