что не так с этим CSS?

Question

Я хочу изменить цвет ссылок h3 на красный в этом коде:

<div class="news_headline">
    <h3 class="breaking"><a href="#">title</a></h3>
</div>

Я изменяю css на:

a.breaking {
    padding-right: 40px;
    background: url('../images/icons/news_breaking.png') right center no-repeat;
    color: red;
}

но это не работает !!! заголовок отображается синим цветом! вот css я меняю:

http://paste2.org/p/1959809

Answer 1

измените a.breaking на .breaking a или добавьте класс breaking к элементу привязки.

Answer 2

a.breaking означает: a-элемент с таким классом взлома: <a class="breaking" href="#">title</a>

Вы можете привязать стиль к элементу h3 следующим образом:

h3.breaking { /* h3 instead of a */
    padding-right: 40px;
    background: url('../images/icons/news_breaking.png') right center no-repeat;
    color: red;
}

или вы можете добавить атрибут класса к элементу a:

<div class="news_headline">
    <h3><a class="breaking" href="#">title</a></h3> <!-- class is in a, not in h3 -->
</div>

Answer 3

Вы должны обернуть тег заголовка тегом привязки http://davidwalsh.name/html5-elements-links

Answer 4

вы должны использовать .breaking a {}.Затем будут применены правила css ко всем элементам, которые имеют class='breaking' или являются <a> тегами.

Два отличных инструмента для отладки css и javascript - это плагин firefox firefox или консоль chrome.Это позволяет легко увидеть, откуда каждый элемент получает свой CSS.

Answer 5

Вы должны определить красный цвет также для: link и a: посещения (поскольку вы определили темный синий в своем коде CSS, строка 10), поэтому попробуйте

.breaking a {
    padding-right: 40px;
    background: url('../images/icons/news_breaking.png') right center no-repeat;
}


.breaking a, .breaking a:link, .breaking a:visited {
    color: red;
}