Блог

HTML:

 <div id="content">
<p> some text </p>
<a href="#"> some link aaa </a>
<a href="#"> some other link bbb</a>
</div>
 

css :

 #content a 
{
color: #red;
text-decoration: underline;
}

.blue { color: #blue; }
 

Мне нравится стилизовать «какую-то другую ссылку bbb» с помощью css. Но мне нравится, чтобы другая ссылка была другого цвета. Я пытаюсь добавить класс в и, но безуспешно.. он перезаписывается с помощью

как мне это сделать?

так почему?

У вас есть проблема со спецификой CSS. У HTML Dog есть хороший учебник по этому вопросу.

Из статьи:

Фактическая специфичность группы вложенных селекторов требует некоторых вычислений. По сути, вы присваиваете каждому селектору идентификаторов («#whatever») значение 100, каждому селектору классов («.whatever») значение 10 и каждому селектору HTML («whatever») значение 1. Затем вы складываете их все и вуаля, у вас есть значение специфичности.

это проблема специфики. попробуйте изменить .blue на #content a.blue

изменение

 .blue { color: blue; }
 

Для

 #content a.blue { color: blue; }
 

РЕДАКТИРОВАТЬ: идентификатор препятствует этому. Идентификатор имеет приоритет.
кроме того, # недействителен.

 <div id="content">
<p> some text </p>
<a href="#" class="f"> some link aaa </a>
<a href="#" class="f2"> some other link bbb</a>
</div>

#content a.f
    {
    color: red;
    text-decoration: underline;
    }

    #content a.f2 
    {
    color: black;
    text-decoration: underline;
    }