Html 将 css 应用于特定的 li 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6376355/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
applying css to specific li class
提问by Rizwan
I have a problem with my list.
我的清单有问题。
I want to specify certain colors for each lielement but can't seem to do it. It keeps doing it for all of them.
我想为每个li元素指定某些颜色，但似乎无法做到。它一直在为他们所有人做这件事。
Here's my CSS:
这是我的 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;
}
Here's the HTML
这是 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>
回答by fijter
That's because of the <a>in there and not using the id which you do use a bit further to the top
那是因为<a>在那里而不是使用您在顶部使用的 id
Change it to:
将其更改为：
#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;
}
and it will probably work
它可能会起作用
回答by Sparky
The CSS you have applies color #c1c1c1 to all <a>elements.
您拥有的 CSS 将颜色 #c1c1c1 应用于所有<a>元素。
And it also applies color #c1c1c1 to the first <li>element.
它还将颜色 #c1c1c1 应用于第一个<li>元素。
Perhaps the code you posted is missing something because I don't see any other colors being defined.
也许您发布的代码缺少某些内容，因为我没有看到定义任何其他颜色。
回答by kinakuta
I only see one color being specified (albeit you specify it in two different places.) Either you've omitted some of your style rules, or you simply didn't specify another color.
我只看到指定了一种颜色（尽管您在两个不同的地方指定了它。）要么您省略了一些样式规则，要么只是没有指定另一种颜色。
回答by Jeff Sheldon
Define them more in your css file. Instead of
在您的 css 文件中更多地定义它们。代替
li.sub-navigation-home-news
try
尝试
#sub-navigation-home li.sub-navigation-home-news
Check this for more details: http://www.w3.org/TR/CSS2/cascade.html#cascade
回答by Niklas
You are defining the color: #C1C1C1;for all the aelements with #sub-nav-container a.
您正在color: #C1C1C1;为所有a元素定义#sub-nav-container a。
Doing it again in li.sub-navigation-home-newswon't do anything, as it is a parent of the aelement.
再次执行 inli.sub-navigation-home-news不会做任何事情，因为它是a元素的父级。
回答by Dipil
You have specified different colors for the li elements but it is being overridden by the specified color in the a within the li. Remove color: #C1C1C1; style from a element and it should work.
您为 li 元素指定了不同的颜色，但它被 li 中 a 中的指定颜色覆盖。去除颜色：#C1C1C1；来自元素的样式，它应该可以工作。
回答by hughes
I believe it's because #ID styles trump .class styles when computing the final style of an element. Try changing your lifrom classto id, or you can try adding !important to your class, like this:
我相信这是因为在计算元素的最终样式时，#ID 样式胜过 .class 样式。尝试将您的lifrom更改class为id，或者您可以尝试将 !important 添加到您的类中，如下所示：
li.sub-navigation-home-news
{
color: #C1C1C1; !important
li.sub-navigation-home-news
{
color: #C1C1C1; !important
