Html 将当前类添加到当前菜单项 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4654197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
adding a current class to current menu item CSS
提问by Denoteone
Just trying to add a class to the menu item of the current page so the user know what page they are currently on. But the background-image will not show. I am applying the class to the <a>but I have also added it to the the <li>
只是尝试向当前页面的菜单项添加一个类，以便用户知道他们当前所在的页面。但背景图像不会显示。我正在应用该类，<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>
Style Sheet:
样式表：
#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;}
回答by BoltClock
You need to qualify your .currentselector with #menu a, otherwise it gets overridden by that previous selector because .currentalone isn't specific enough:
您需要使用 来限定您的.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;}
Your CSS could also use better formatting, it's pretty hard to read like this.
您的 CSS 也可以使用更好的格式，这样阅读起来非常困难。
回答by T.Todua
WORDPRESShas already the function, which adds current_page_itemclass to the current menu item, so just add like this in css:
WORDPRESS已经有了current_page_item给当前菜单项添加class的功能，所以在css中像这样添加：
.current_page_item {
background-color:yellow;
}
