将css应用于特定的li类 [英] applying css to specific li class

问题描述

我想为每个 li 元素指定某些颜色，但是似乎无法做到这一点。它继续为所有人做。

这是我的CSS：

 ＃sub-nav-container ul 
 {
 position：absolute; 
 top：96px; 
 left：594px; 
保证金：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; 
颜色：＃C1C1C1; 
 display：inline; 
} 
 
 li.sub-navigation-home-news 
 {
 color：＃C1C1C1; 
 font-family：Arial; 
 font-size：13.5px; 
 text-align：center; 
 text-transform：大写; 
 padding：0px 90px 0px 0px; 
} 
  

这里是HTML

 < div id =sub-nav-container> 
< ul id =sub-navigation-home> 
< li class =sub-navigation-home-news>< a href =＃>新闻< / a>< / li> 
< li class =sub-navigation-home-careers>< a href =＃>招聘< / a>< / li> 
< li class =sub-navigation-home-client>< a href =＃>客户端登入< / a>< / li> 
< li class =sub-navigation-home-canada>< a href =＃>加拿大< / a>< / li> 
< li class =sub-navigation-home-usa>< a href =＃>美国< / a>< / li> 
< / ul> 
< / div> 
  

解决方案

这是因为< ;一个> 在那里，并没有使用id，至少使用一点点到顶端

更改为：

 ＃sub-navigation-home li.sub-navigation-home-news a 
 {
 color：＃C1C1C1; 
 font-family：arial; 
 font-size：13.5px; 
 text-align：center; 
 text-transform：大写; 
 padding：0px 90px 0px 0px; 
} 
  

，它可以正常工作

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>

解决方案

That's because of the <a> in there and not using the id wich 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 propably work

这篇关于将css应用于特定的li类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！