更改列表中项目符号的颜色？

Question

我在更改列表中的子弹颜色时遇到问题.

所以<nav>我的HTML文件中的标签内有一个列表:

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

DEMO