CSS и специфичность - класс против идентификаторов

Question

Рассмотрим следующий html:

<div id="rightBar">
    <div class="barElement">
        <div class="barText"><a href="#">Not underlined</a><br /></div>
        <div class="barLinks"><a href="#">Should be underlined</a></div>
    </div>
</div>

и следующий css:

#rightBar a
{
    text-decoration: none;
}
#rightBar a.barLinks
{
    text-decoration: underline;
}

Ссылка 'Должен быть подчеркнута' не подчеркнута, если это не так, поскольку она наследует как класс barLinks, так и правую панель идентификатора. Также «#rightBar a.barLinks» (0, 1, 1, 1) обладает большей специфичностью, чем «#rightBar a» (0, 1, 0, 1), поэтому он должен переопределять последнее, верно?

Как еще можно получить ссылку "Следует подчеркнуть", которая будет подчеркнута без использования каких-либо встроенных спецификаций (как CSS, так и HTML)

Answer 1

Ваш a элемент не имеет класса barLinks.Сделайте это:

#rightBar .barLinks a
{
    text-decoration: underline;
}

пример: http://jsfiddle.net/J34mj/2/

Answer 2

Это не проблема специфичности, вы используете неправильный селектор.Должно быть так:

#rightBar .barLinks a {}

Answer 3

#rightBar a.barLinks
{
    text-decoration: underline;
}

Не будет работать, потому что class = "barLinks" не на <a>

Попробуйте это;

#rightBar .barLinks a
{
    text-decoration: underline;
}

Или не получится;

#rightBar .barLinks a
{
    text-decoration: underline !important;
}

Answer 4

Так не должно быть, barLinks применима только к тегам, если вы измените свой CSS на #rightBar .barLinks a он должен работать.