[英]CSS: changing the color of a bullet in a list?
我在更改列表中项目符号的颜色时遇到问题。
所以我在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 a {
display: block;
float: left;
max-height: 25px;
width: 100px;
margin: 0;
padding: 5px 0;
font-family: tahoma, sans-serif;
font-size: 20px;
text-align: center;
background-color: #696969;
text-decoration: none;
color: #FFFFFF;
border-bottom: #696969 solid 2px;
}
#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; }
然后添加:
#top-menu ul li span {
color: black;
}
问题是它什么都不会改变。
换句话说,现在导航菜单中的每个项目符号都是白色,但我想将“产品”设置为黑色。
我究竟做错了什么?
谢谢。
通常,此类修改是使用类完成的,而不是更改html标记结构。 我在项目中添加了“亮点”类:
HTML标记:
<nav id="top-menu">
<ul>
<li> <a href="">Home</a> </li>
<li class="highlight"> <a href="">Products</a> </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>
CSS代码:
#top-menu ul li.highlight * {
color: black;
}
通过在CSS底部进行少量修改,您可以找到所需的内容。
尝试这个
的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 a {
display: block;
float: left;
max-height: 25px;
width: 100px;
margin: 0;
padding: 5px 0;
font-family: tahoma, sans-serif;
font-size: 20px;
text-align: center;
background-color: #696969;
text-decoration: none;
color: #FFFFFF;
border-bottom: #696969 solid 2px;
}
#top-menu ul li a:hover { border-bottom: #FFFFFF solid 2px; }
#top-menu ul li span a{
color:black
}
尝试这个:
#top-menu ul li span a{
color: black !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.