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

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 span {
    color: black;
}

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

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

我究竟做錯了什么？

謝謝。

Answer 1

設置項目符號的樣式，您可以嘗試執行以下操作：

    ul { list-style: none; }

    li:before { content:"\2022 \00A0"; color: blue; }

演示

Answer 2

這篇帖子怎么樣 ： 如何通過CSS在UL / LI html列表中設置項目符號顏色，而不使用任何圖像或span標簽
摘抄：

li:before {
    content: "• ";
    color: red; 
}  

在你的情況下

#top-menu ul li span:before {
    content: "• ";
    color: black; 
}
#top-menu ul li:before {
    content: "• ";
    color: someOtherColor; 
}

更新：添加一個帶有紅色點的小提琴和一個黑色的小提琴，以便您可以輕松地切換活動的一個紅色/黑色演示小提琴，我正在使用一個類來定義活動項目

#top-menu ul li.active:before { content: "• "; color: black; }
#top-menu ul li:before { content: "• "; color: red; }