我在更改列表中项目符号的颜色时遇到问题。
所以我的HTML文件中的<nav>
标记内有一个列表:
<nav id="top-menu">
<ul>
<li> <a href="">Home</a> </li>
<li><span> <a href="">Products</a> </span></li>
<li> <a href="">Statistics</a> </li>
<li> <a href="">Countries</a> </li>
<li> <a href="">Settings</a> </li>
<li> <a href="">Contacts</a> </li>
</ul>
</nav>
因为您可以看到我的<nav>
标记有id="top-menu"
。还有一件事:
<li><span> <a href="">Products</a> </span></li>
在这里,您可以看到我在我的子弹中添加了<span>
标记。
这是我的CSS文件:
nav#top-menu {
width: 100%;
height: 33px;
background-color: #696969;
margin: 0;
padding: 0;
}
#top-menu ul {
display: block;
list-style-type: none;
width: 600px;
margin: 0 auto;
padding: 0;
}
#top-menu ul li {
margin: 0;
padding: 0;
}
然后我补充一下:
#top-menu ul li span {
color: black;
}
问题是它没有改变任何东西。
换句话说,现在导航菜单中的每个子弹都是白色的,但我想让“产品”变黑。
我做错了什么?
感谢。
答案 0 :(得分:5)
答案 1 :(得分:4)
这篇文章怎么样:How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags
摘录:
li:before {
content: "• ";
color: red;
}
在你的情况下
#top-menu ul li span:before {
content: "• ";
color: black;
}
#top-menu ul li:before {
content: "• ";
color: someOtherColor;
}
更新:添加一个带有红点和一个黑点的小提琴,这样您就可以轻松切换活动的点 red/black demo fiddle 我正在使用类来定义活动项
#top-menu ul li.active:before { content: "• "; color: black; }
#top-menu ul li:before { content: "• "; color: red; }