Try English version of Quizful



Раздаем бесплатные Q! подробности в группе Quizful.Alpha-test
Топ контрибуторов
loading
loading
Знаете ли Вы, что

Свои вопросы для тестов можно добавлять на странице с информацией о тесте. При этом для некоторых тестов добавление вопросов закрыто

Лента обновлений
ссылка 14:16:51
Добавлен вопрос в тест Python 3 Основы
ссылка 12:51:41
Комментарий от igboev:
Очень интересный материал для новичков, спасибо!
Печально...
ссылка 12:29:45
Комментарий от topor:
к hrybs
ссылка 11:22:47
Комментарий от ipaSoft:
Ловушка для Java мэнов
ссылка 11:18:55
Комментарий от ipaSoft:
ёкарный бабай. Я был уверен что никогда не попадусь на э...
Статистика

Тестов: 153, вопросов: 8597. Пройдено: 422074 / 2061716.

Приоритетность селекторов в CSS (специфичность селекторов, selector's specificity)

head tail Статья
категория
Веб технологии
дата15.05.2009
авторRazor
голосов34

Введение в использование CSS селекторов

Допустим, у Вас есть несколько селекторов которые ссылаются на один и тот же элемент:


div span { text-decoration:underline; }
span { text-decoration:none; }

Открыв HTML страницу где элемент span находится внутри элемента div мы увидим подчеркнутый текст. А если мы пойдем дальше и с помощью плагина Firebug посмотрим стили вложенного элемента, мы увидим следующее:


div span {
    text-decoration:underline;
}
span {
    text-decoration:none;
}

Сразу же возникает вопрос о причине такого поведения. Ведь второй селектор должен перекрывать первый учитывая каскадность стилей. Данный пример как нельзя четко показывает что такое специфичность селекторов.

Правила специфичности

Специфичность селекторов (selector's specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет.

В спецификации по CSS 2.1 этой теме посвящен небольшой раздел. Существует 4 правила по которым вычисляется специфичность селекторов:

  1. Самый высокий приоритет имеет атрибут style. Это правило перекрывает все селекторы описанные в стилях.
  2. Второе место занимает присутствие ID в селекторе(#some-id).
  3. Далее идут все атрибуты(в том числе и атрибут class) и псевдоклассы(pseudo-classes) в селекторе.
  4. Самый низкий приоритет у селекторов с именами элементов и псевдоэлементами(pseudo-elements).

Все 4 правила сводятся в одну систему a-b-c-d(где а - наивысший приоритет) и образуют специфичность.

Далее рассмотрим принцип построения такой системы специфичности на примере разнообразных селекторов:

СелекторСпецифичность a-b-c-dПравило №
* 0-0-0-0-
li 0-0-0-14
li:first-line 0-0-0-24
ul li 0-0-0-24
ul ol+li 0-0-0-34
form + *[type=text] 0-0-1-13, 4
table tr td.second 0-0-1-33, 4
h2.block.title. 0-0-2-13, 4
#xyz 0-1-0-02
style=" " 1-0-0-01

Пример специфичности - правило №1:


<head>
<style type="text/css">
    #summary { color: red }
</style>
</head>
<body>
    <p id="summary" style="color: blue">content</p>
</body>

Текст внутри элемента p будет отображаться синим цветом независимо от селектора с айди(id), где также указано свойство color со значением red. Правило номер 1 всегда перекрывает все селекторы и имеет наивысшую приоритетность.

Правило №2:


<head>
    <style type="text/css">
        #second { color:green; }
        ul li.second { color:blue; }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li class='second' id="second">second</li>
    </ul>
</body>

Несмотря на то что селектор с id указан в стилях сверху, именно он повлияет на отображение документа, так как более специфичен нежели селектор с классом second.

Правило №3:


<head>
    <style type="text/css">
       input[type=text] { font-weight:bold; }
       form input { font-weight:normal; }
    </style>
</head>
<body>
    <form action="" method="post">
        <input type="text" name="Company" />
        <input type="submit" name="Ok" />
    </form>
</body>

Текст внутри поля ввода будет отображаться жирным, а второй селектор определит стили только для кнопки отправки запроса.

Вернемся к первому примеру этой статьи - правило №4:

div span { text-decoration:underline; }
span { text-decoration:none; }

Первый селектор выигрывает у второго потому что включает в себя 2 последних правила специфичности, в то время как второй - всего одно. Чтобы убрать декорирование текста в данном случае следует использовать класс или более специфичный селектор:

div span { text-decoration:underline; }
body span { text-decoration:none; }

Теперь селекторы имеют одинаковый вес(0-0-0-2 = 0-0-0-2) касательно специфичности. Второй селектор просто перекроет свойство первого так как описан ниже.

Уверен, что большинство верстальщиков точно знают 2 первых правила специфичности селекторов про id и style и эта статья не была для них чем-то новым. Но не стоит забывать о двух оставшихся, ведь это может существенно приостановить процесс создания верстки и увеличить время выявления возникшей ошибки.

Вот и все о чем я хотел рассказать. Надеюсь, что статья была вам интересна.

--
Владислав Razor Чапюк, апрель 2009

Если Вам понравилась статья, проголосуйте за нее

Голосов: 34  loading...
yohan   admin   c0nst   Gres   web_michael   Razor   dimka_kep   DrDrey   kuzvld   sava   nazik   Fisk   alexpts   javadev75   tempman   dbret   Hripunov   Netmate   alic   aleksor   KronuS   Paul_Saiziger   Chernogorcev   dezmond   yubrf   gavdey   alexisd778   BarsicPlus   ckpinka   DanUrov   quarck   qui_Kliuchuk   Galler   Dekare