Question

我的列表存在问题。

我想为每个li元素指定某些颜色，但似乎无法做到。它一直在为所有人做这件事。

这是我的CSS：

#sub-nav-container ul
{
    position: absolute;
    top: 96px;
    left: 594px;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#sub-nav-container li 
{
    margin: 0;
}

#sub-nav-container a
{
    display: block;
    text-decoration: none;
    border-bottom: none;
    color: #C1C1C1;
    display: inline;         
}

li.sub-navigation-home-news  
{
    color: #C1C1C1;
    font-family: Arial;
    font-size: 13.5px;
    text-align: center;
    text-transform: uppercase;
    padding: 0px 90px 0px 0px; 
}

这是HTML

<div id="sub-nav-container">
    <ul id="sub-navigation-home">
        <li class="sub-navigation-home-news"><a href="#">News</a></li>
        <li class="sub-navigation-home-careers"><a href="#">Careers</a></li>
        <li class="sub-navigation-home-client"><a href="#">Client Login</a></li>
        <li class="sub-navigation-home-canada"><a href="#">CANADA</a></li>
        <li class="sub-navigation-home-usa"><a href="#">USA</a></li>
    </ul>
</div>

Answer 1

那是因为那里有<a>并且没有使用您使用的ID，而是使用了更远的顶部

将其更改为：

#sub-navigation-home li.sub-navigation-home-news a 
{
 color: #C1C1C1;
 font-family: arial;
 font-size: 13.5px;
 text-align: center;
 text-transform:uppercase;
 padding: 0px 90px 0px 0px; 
}

它可能会起作用

Answer 2

您使用的CSS将颜色＃c1c1c1应用于所有<a>元素。

它还将颜色＃c1c1c1应用于第一个<li>元素。

您发布的代码可能缺少某些东西，因为我没有看到任何其他颜色被定义。

Answer 3

在css文件中更多地定义它们。而不是

li.sub-navigation-home-news

试

#sub-navigation-home li.sub-navigation-home-news

检查以获取更多详细信息： http://www.w3.org/TR/CSS2/cascade.html#cascade

Answer 4

我只看到指定了一种颜色（虽然你在两个不同的地方指定它。）要么你省略了一些你的风格规则，要么就是你没有指定另一种颜色。

Answer 5

您正在使用color: #C1C1C1;为所有a元素定义#sub-nav-container a。

在li.sub-navigation-home-news中再次执行此操作将不会执行任何操作，因为它是a元素的父级。

Answer 6

您已为li元素指定了不同的颜色，但它被li中的a中的指定颜色覆盖。去除颜色：＃C1C1C1;一个元素的风格，它应该工作。

Answer 7

我相信这是因为#ID样式在计算元素的最终样式时会胜过.class样式。尝试将li从class更改为id，或者您可以~~尝试添加！对您的班级很重要，例如：~~

li.sub-navigation-home-news { color: #C1C1C1; !important

<击>

将css应用于特定的li类

7 个答案: