applying css to specific li class [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 7 years ago.

I have a problem with my list.

I want to specify certain colors for each li element but can't seem to do it. It keeps doing it for all of them.

Here's my 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

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

回答1:

That's because of the <a> in there and not using the id which you do use a bit further to the top

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

回答2:

The CSS you have applies color #c1c1c1 to all <a> elements.

And it also applies color #c1c1c1 to the first <li> element.

Perhaps the code you posted is missing something because I don't see any other colors being defined.

回答3:

Define them more in your css file. Instead of

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

回答4:

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.

回答5:

You are defining the color: #C1C1C1; for all the a elements with #sub-nav-container a.

Doing it again in li.sub-navigation-home-news won't do anything, as it is a parent of the a element.

回答6:

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.

回答7:

I believe it's because #ID styles trump .class styles when computing the final style of an element. Try changing your li from class to id, or you can try adding !important to your class, like this:

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

来源：https://stackoverflow.com/questions/6376355/applying-css-to-specific-li-class