В каком порядке применяются стили CSS?

У меня есть следующий HTML.

<ul>
  <li>
    <a>asdas</a>
  </li>
</ul>

В моей таблице стилей CSS у меня есть общие настройки для тега, а несколько ранее выделенных строк для ul li a. Вот так:

a:link
{
 color: red;
}
...
ul li a
{
 color:blue;
}

Firebug сообщает мне, что сначала загружается цвет: синий, а затем переопределяется цветом: красный
До сих пор я всегда думал, что порядок загрузки css файлов и порядок стиля внутри одного файла css сообщают браузеру, как должны быть отформатированы элементы html. К сожалению, я сейчас испытываю это наоборот.

Так скажите мне, как мне исправить свой стиль, чтобы получить тег внутри li, который будет отображаться синим, а не красным?

Ответы

Ответ 1

Стили применяются в соответствии с тем, какие стили наиболее специфичны для этого элемента, а затем в текстовом порядке для правил, имеющих одинаковую специфичность. Подробнее здесь в спецификации. Поскольку a:link более специфичен, чем ul li a, этот стиль выигрывает независимо от места размещения.

Так скажите мне, как мне исправить свой стиль, чтобы получить тег внутри li, который будет отображаться синим, а не красным?

Сделайте синее правило как минимум красным. В этом случае вы можете сделать это, добавив к нему :link:

ul li a:link
{
  color:blue;
}

Ответ 2

Вот статья о специфичности CSS Selector, которая выглядит хорошо: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Раздел в Как измерить специфичность? дает вам ответ:

a:link   => one tag (a) + one pseudo-class (:link) = 1 + 10    = 11 points
ul li a: => three tags (ul, li, a)                 = 1 + 1 + 1 =  3 points

Таким образом выигрывает стиль a: link.

Подсказка: порядок (в файлах CSS) имеет значение только тогда, когда два селектора css имеют одинаковую специфичность.

Ответ 3

Я бы использовал color:blue !important;