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

Question

У меня есть следующий 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-элементы. К сожалению, сейчас я испытываю это наоборот.

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

Answer 1

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

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

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

ul li a:link
{
  color:blue;
}

Answer 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 имеют одинаковую специфичность.

Answer 3

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