it-swarm.com.ru

применение 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>
6
Rizwan

Это потому, что там есть <a> и не используется идентификатор, который вы используете чуть дальше к началу

Измените это на:

#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; 
}

и это, вероятно, будет работать

11
fijter

Используемый вами CSS применяет цвет # c1c1c1 ко всем элементам <a>.

И это также применяет цвет # c1c1c1 к первому элементу <li>.

Возможно, в опубликованном вами коде чего-то не хватает, потому что я не вижу определения других цветов.

1
Sparky

Определите их больше в вашем файле CSS. Вместо 

li.sub-navigation-home-news 

пытаться

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

Проверьте это для более подробной информации: http://www.w3.org/TR/CSS2/cascade.html#cascade

0
Jeff Sheldon

Я вижу только один цвет (хотя вы указываете его в двух разных местах). Либо вы пропустили некоторые правила стиля, либо просто не указали другой цвет.

0
kinakuta

Вы определяете color: #C1C1C1; для всех элементов a с помощью #sub-nav-container a.

Повторное выполнение в li.sub-navigation-home-news ничего не даст, так как это родительский элемент элемента a.

0
Niklas

Вы указали разные цвета для элементов li, но они переопределяются указанным цветом в a внутри li. Удалить цвет: # C1C1C1; стиль из элемента, и это должно работать.

0
Dipil