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

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

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

我究竟做错了什么？

谢谢。

4

4 回答 4

7

试试这个方法 

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

演示

于 2013-07-24T07:29:42.083 回答
1

通常，此类修改是使用类完成的，而不是更改 html 标记结构。我在项目中添加了一个类“highlight”：

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 底部的轻微修改，您将获得所需的内容。

于 2013-07-24T07:36:11.953 回答
0

尝试这个

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
}
于 2013-07-24T07:32:17.783 回答
0

尝试这个： 

#top-menu ul li span a{
    color: black !important;
}
于 2013-07-24T07:35:06.817 回答