Как применить одно и то же объявление ко многим различным объектам?

Question

Я делаю некоторые хаки в CSS, чтобы разместить нашу старую инфраструктуру шаблонов в новом макете. Наше меню имеет «активное» состояние, соответствующее разделу, в котором я нахожусь.

Пытаясь достичь этого, я написал:

div#left-col ul li.cidades.Cidades a, div#left-col ul li.amizade.Amizade a, div#left-col ul li.encontros.Encontros a,div#left-col ul li.idade.Idade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

но это просто не работает! стиль применяется только к одному из элементов. и я решил написать этот код, чтобы исправить проблему:

div#left-col ul li.cidades.Cidades a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.amizade.Amizade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.encontros.Encontros a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

div#left-col ul li.idade.Idade a {
    display:block;
    background:transparent url(http://bp.i.bol.com.br/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
    color:white;
    width: 166px;
}

Но я не понимаю ни проблему, ни решение ....

РЕДАКТИРОВАТЬ: вот HTML-код, который я пытаюсь применить этот стиль:

<div id="left-col">
<ul>
<li class="amizade Idade"><a href="#">Amizade</a></li>
<li class="cidades Idade"><a href="#">Cidades</a></li>
<li class="encontros Idade"><a href="#">Encontros</a></li>
<li class="idade Idade"><a href="#">Idade</a></li>
</ul>
</div>

Обратите внимание, что я хочу, чтобы стиль применялся только тогда, когда в классе появляются 2 повторяющихся слова.

РЕДАКТИРОВАТЬ 2:

Я решил проблему, переместив правильные объявления (те, у которых много элементов, за которыми следуют запятые) над этим:

div#left-col ul li a{outline: 0px dashed red;display:block; background:transparent url(menu-esq-a.png) no-repeat scroll 0px -4px; height:22px; padding:8px 0 0 23px; margin:0; font-family: Arial, Sans-serif; font-weight: bold; font-size: 14px; text-decoration:none; color:#00574a}

, который должен был быть статусом по умолчанию для моих. Странно, так как я думал, что самое конкретное заявление победит меньшее.

Answer 1

У вас уже есть общий класс css, примененный ко всем элементам (это Idade, и он является частью атрибута class каждого элемента).

Это означает, что достаточно (и рекомендуется) объявить стиль для только для этого класса :

div#left-col ul li.Idade {
   display:block;
   background:transparent url(/v11/menu-esq-a.png) no-repeat scroll -161px -4px;
   color:white;
   width: 166px;
}

В качестве примечания, другое имябольше подходит для общего класса, так как только одно из ваших элементов соответствует этому имени.Имя типа menuItem будет гораздо более наглядным, чем Idade IMO.