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

将当前类添加到当前菜单项CSS

2 个答案: