1

我在更改列表中项目符号的颜色时遇到问题。

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

问题是它不会改变任何东西。

换句话说，现在我的导航菜单中的每个项目符号都是白色的，但我想让“产品”变成黑色。

我究竟做错了什么？

谢谢。

4

2 回答 2

5

要样式子弹，您可以尝试这样做：

    ul { list-style: none; }

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

演示

于 2013-07-23T20:28:50.853 回答
4

这篇文章怎么样：如何在不使用任何图像或跨度标签的情况下通过 CSS 在 UL/LI html 列表中设置项目符号颜色
摘录：

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; }
于 2013-07-23T20:29:17.840 回答