В котором порядке применяются стили CSS?
У меня есть следующий HTML.
<ul>
<li>
<a>asdas</a>
</li>
</ul>
В моей таблице стилей CSS у меня есть общие настройки для тег и несколько hundered строк более поздние настройки для лития ул. a. Как это:
a:link
{
color: red;
}
...
ul li a
{
color:blue;
}
Firebug говорит мне, что сначала color:blue загружается и впоследствии переопределяется color:red
До сих пор я всегда думал, что порядок загружающихся файлов CSS и порядок стиля в единственном файле CSS говорят браузер, как должны быть отформатированы элементы HTML. К сожалению, я теперь испытываю его наоборот.
Поэтому скажите мне, как я должен исправить свой стиль для достижения тега в литии, который будет представлен синий и не красный?
3 ответа
Стили применяются в соответствии с тем, какие стили наиболее специфичны для элемента, а затем в текстовом порядке для правил, имеющих одинаковую специфичность. Подробнее здесь в спецификации. Поскольку a:link более специфичен, чем ul li a, этот стиль побеждает независимо от размещения.
Итак, скажите мне, как я должен исправить свой стиль, чтобы тег a внутри li отображался синим, а не красным?
Сделайте правило синего цвета по крайней мере таким же конкретным, как и правило красного цвета. В данном случае это можно сделать, добавив к нему :link:
ul li a:link
{
color:blue;
}
Вот статья о специфичности CSS-селектора, которая выглядит неплохо: 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 имеют одинаковую специфичность.