CSS：更改列表中項目符號的顏色？

Question

我在更改列表中項目符號的顏色時遇到問題。

所以我在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;
}

問題是它什么都不會改變。

換句話說，現在導航菜單中的每個項目符號都是白色，但我想將“產品”設置為黑色。

我究竟做錯了什么？

謝謝。

Answer 1

試試這個

#top-menu ul li   span  a{
    color: black;
}

演示版

Answer 2

通常，此類修改是使用類完成的，而不是更改html標記結構。 我在項目中添加了“亮點”類：

http://jsfiddle.net/bvedE/1/

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底部進行少量修改，您可以找到所需的內容。

Answer 3

嘗試這個

http://jsfiddle.net/QZD5d/

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

Answer 4

嘗試這個：

#top-menu ul li span a{
    color: black !important;
}