将css应用于特定的li类

我想为每个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>

来源

2011-06-16 Rizwan

定义他们更多的在你的CSS文件。取而代之的

li.sub-navigation-home-news

尝试

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

检查此了解更多详情： http://www.w3.org/TR/CSS2/cascade.html#cascade

来源

2011-06-16 17:55:59

-2

我相信这是因为计算元素的最终样式时#ID样式王牌的.class风格。尝试从class改变你li到id，或者你可以 ~~尝试添加到您的类重要的，就像这样：！~~

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

来源

2011-06-16 17:56:24 hughes

重要的是邪恶的，尽量避免它，它会导致你最终维护你的CSS的麻烦，结束在灾难！ – fijter 2011-06-16 17:58:17

嗯，看起来你是对的。我没有意识到这一点。我可能需要做一些工作来完成我的样式表... – hughes 2011-06-16 18:03:31

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

来源

2011-06-16 17:56:39 kinakuta

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

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

也许你发布的代码缺少一些东西，因为我没有看到任何其他颜色被定义。

来源

2011-06-16 17:57:04 Sparky

这是因为<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; 
}

，它会propably工作

来源

2011-06-16 17:57:15 fijter

嘿谢谢，这个工作很棒。 – Rizwan 2011-06-16 18:04:57

@Rizwan：如果这个工作，你应该标记asnwer被接受。 – Jawad 2011-06-16 18:09:19

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

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

来源

2011-06-16 17:57:17 Niklas

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

来源

2011-06-16 17:57:41 Dipil

将css应用于特定的li类

回答

相关问题