Специфичность селекторов CSS, или кто в коде главный

11.29.2008  –  Рубрика: HTML&CSS

Существует множество способов присвоить какой-либо стиль оформления нужному элементу. Но что происходит, если к одном элементу обращаются два взаимоисключающих селектора? Задача перекрытия селекторов стилей решается с помощью двух принципов CSS: специфичность и каскад. С каскадом все очень просто, если одному элементу присваиваются два селектора стиля, которые имеют одинаковую специфичность, верх берет тот стиль, который указан позже.

А вопрос приоритетности стилей решает принцип специфичности. Специфичность это что-то вроде таблицы «рангов» селекторов стилей. Стиль, который имеет приоритет выше, присваивается атрибуту, если в каскаде нет селектора, который имеет такую же специфичность и объявлен позже. Специфичность стиля записывается в виде четырех порядков (0,0,0,0). Чем больше число, тем выше специфичность, порядок который стоит левее является более значительным по сравнению с правым, таким образом, специфичность (0,1,0,0) является высшее специфичности (0,0,0,99). Значение специфичности селектора вычисляется таким образом:

  • Для каждого указанного в селекторе значения идентификатора(#someID) к специфичности добавляется 0,1,0,0.
  • Для каждого указанного в селекторе имени класса(.someClass), псевдокласса(:hover) или атрибута([href=”http://zodios.net”]) к специфичности добавляется 0,0,1,0
  • Для каждого заданного в селекторе элемента(h1,strong,div) к специфичности добавляется 0,0,0,1
Пример расчета специфичности:

h1 {color:red}  /*специфичность — 0,0,0,1*/

p em {color:#000}  /*специфичность — 0,0,0,2 */

.color {color:#fff} /*специфичность — 0,0,1,0*/

p.bright em.dark {color:#ff0000}  /*специфичность — 0,0,2,2*/

#color {color:#333}  /*специфичность — 0,1,0,0*/

em#color {color:#666}  /*специфичность — 0,1,0,1*/

Кроме специфичности для параметров стилей есть еще дополнительный атрибут !important. Этот атрибут делает указанный параметр(не селектор) высшее чем аналогичный параметр в селекторе который имеет более высокую специфичность. Атрибут !important записывается через пробел до закрывающего знака «;».


h1#someID /*специфичность — 0,1,0,1*/{
color:green;
text-decoration: line-through;
}

h1  /* специфичность — 0,0,0,1*/{
color:red !important;
text-decoration:underline;
}

В результате тексту который будет находиться в элементе <h1 id=”someID”> будет присвоен красный цвет несмотря на то, что специфичность первого селектора выше, но начертание текста будет зачеркнутым, так как !important относится только к параметру color. Но если !important присвоено двум одинаковым параметрам, верх берет тот, специфичность селектора которого выше.

Источник — «CSS — каскадные таблицы стилей. Подробное руководство.» Э.Мейер

Tags:

14 Отзывов to “Специфичность селекторов CSS, или кто в коде главный”

  1. Jman:
    Ноябрь 29, 2008 в 22:18

    ммм, как-то быстро в моей ленте появились две новости почти с идентичной темой… http://web-linux.ru/?p=479

  2. kalapunga:
    Декабрь 1, 2008 в 23:57

    я баловался с этими вещами, но потом предоставил дело профессионалу (брату) и тепер пользуюсь плодами его фантазии

  3. Vladimir:
    Декабрь 2, 2008 в 15:03

    Хорошо, а если так:

    div ul:first-child > li h3 + p ~ a

    ?

    PS – эта конструкция имеет смысл :-) Честно.

  4. Zodios:
    Декабрь 2, 2008 в 22:31

    Мне кажется эта конструкция не имеет смысла…
    Для поддержки рядя вещей из вышеуказанного в ие6 нужно подключать сторонние костыли. Порой легче задать через отдельные классы.

  5. Vladimir:
    Декабрь 5, 2008 в 19:13

    IE6 уже морально устарел… Кстати, многие зарубежные компании отказываются от его поддержки (и правильно делают). Если мы будем оглядываться на IE6, то в чем смысл CSS3, XHTML 1.1 Strict, полупрозрачных PNG и других вещей, который ишак не поддерживает или поддерживает через пятую точку?

    Backwards compatibility всегда обходится дорого, будь это вёрстка, программирование или что-либо другое.

  6. Jman:
    Декабрь 6, 2008 в 7:43

    если мой коментарий удалён, то значит в своих догадках я был прав…
    Если бы был не прав, то получил бы вразумительный ответ.

  7. Zodios:
    Декабрь 6, 2008 в 10:07

    2Jaman твой комментарий не прошел моддерацию на автомате и я его не заметил. По поводу сходности материла — значит мы с автором об одном мыслим. Я кстати не побоялся указать на то, что материла рерайт и указать на источник.

    2Vladimir
    ИЕ6 то морально устарел, но по статистике еще многие на нем сидят, к тому же многие заказчики требуют в обязательном порядке его поддержку.

  8. Jman:
    Декабрь 6, 2008 в 15:32

    А, тогда извиняюсь :)

  9. Almaz:
    Декабрь 11, 2008 в 16:04

    а это вообще реально нужно чтоли на практике?

  10. Zodios:
    Декабрь 11, 2008 в 17:25

    2Almaz
    Вообще-то да, это ключевой принцип как и наследование и каскад.

  11. Almaz:
    Декабрь 11, 2008 в 17:29

    нет ну допустим с наследованием и каскадированием проблем нет… а вот смысл вот этого вот не пойму никак…

  12. AlexMakII:
    Декабрь 15, 2008 в 15:25

    На самом деле специфичнсоть не особено нужна, привожу пример:
    1. Часто програмист PHP сравнивает два значения через «==», и не задумываеться о том что правильнее «===». В теории, неправильное сравнение может привести к ошибке, на практике мы не столь уж часто попадаем в подобные ситуации. И суть не в том что правильнее, а чтобы знать подоплеки поведения программы.

    Я сегодня как раз столкнулся с специфичностью, не знал о таких разделениях, и решил проблемму интуитивно – указал в селекторе родительский класс. Я ошибочно полагал, что более позднее определение, всегда главнее, оказалось что не всегда.

    Спасибо автору за статью, заставила задуматься, хотелось бы уточнить из принципа «Как определяеться специфичность для стиля, определеного в теге, через свойство style».

  13. Zodios:
    Декабрь 15, 2008 в 20:55

    На самом деле специфичность селектора очень важна, не зная специфичности нельзя организовать красивые каскадные таблицы. Для перекрытия стилей которые прописаны в элементе нужно воспользоваться !important.

  14. Almaz:
    Декабрь 15, 2008 в 21:21

    нет, ну это и так всё понятно, только до этого допустим «народным» методом можно дойти… собственно у меня таким образом образовалось не одно хобби, и до сих пор не могу понять семантики «специфичности»

Оставить отзыв

Последние записи

Цифровая печать - Оперативная полиграфия T-Print, печать визиток, флаеров, бланков. Веб-дизайн сайтов создание недорогих веб сайтов в москве веб дизайн сайтов разработка cms.