Приоритет в CSS


Содержание

CSS :: Наследование, каскадирование и приоритетность стилей

Наследование в CSS

Все свойства CSS делятся на те, которые наследуются элементами-потомками от своих элементов-предков, и те, которые не наследуются. Так, например, если для параграфа задать границу (сформировать рамку), то все вложенные в него элементы (элементы-потомки) не унаследуют это свойство CSS, поскольку в данном случае наследование не имеет положительного эффекта. Согласитесь, не совсем разумно было бы переопределять для каждого элемента-потомка унаследованные от абзаца-родителя границы. Но, если мы зададим для абзаца, например, синий цвет шрифта, то он будет унаследован всеми элементами потомками до тех пор, пока мы не переопределим его в случае необходимости для конкретного элемента, а это эффективнее, чем определять шрифт отдельно для каждого элемента-потомка. Узнать, какие стилевые свойства наследуются, а какие нет, можно в нашем справочнике CSS здесь.

Каскадирование стилей CSS

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

Давайте для начала рассмотрим простейший случай, показанный в примере №1.

Пример №1. Простейший случай каскадности стилей CSS

Как видно из примера, к первому абзацу применяется только первый стиль из внутренней таблицы стилей, который задает ему черный фон и красный цвет шрифта. Ко второму абзацу применяется уже два стиля из внутренней таблицы стилей, поэтому результирующий стиль формируется следующим образом: сперва берутся все свойства стиля, у которого специфичность (конкретность) селектора больше (в нашем случае это второй стиль), затем добавляются отсутствующие в нем свойства из других, применяемых к данному элементу стилей, у которых специфичность (конкретность) селектора меньше (в нашем случае это первый стиль). Таким образом, для второго абзаца будет добавлена ширина, а фон будет переопределен с черного на желтый. К третьему абзацу применяется сразу три стиля: два из внутренней таблицы стилей и собственный встроенный стиль. Встроенный стиль обладает наибольшим приоритетом, поэтому он переопределит цвет шрифта, заданный в первом стиле, и ширину, заданную во втором стиле внутренней таблицы стилей.

Таким образом, чтобы правильно рассчитать результирующий стиль, применяемый к элементу, необходимо знать правила формирования этого стиля в случае наложения нескольких стилей сразу. Правила эти сводятся к расчету специфичности селекторов применяемых к элементу стилей, содержащих одинаковые css -свойства с разными значениями, а также, в случае равенства специфичности селекторов, к сравнению видов стилей, сравнению расположения таблиц с этими стилями или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы. Рассмотрим этот вопрос подробнее.

Специфичность селекторов CSS

Если к одному и тому же элементу применяются два правила, содержащие одинаковые свойства CSS, но имеющие разные значения, возникает конфликт, который может быть решен при помощи сравнения специфичности селекторов этих правил. В результате этого решения к элементу будет применено свойство правила, у которого специфичность селектора больше.

Расчет специфичности селектора производится при помощи трех чисел ( a , b , c ). Происходит это следующим образом:

  • числу a присваивается количество идентификаторов в селекторе;
  • числу b присваивается суммарное количество классов, атрибутов и псевдоклассов в селекторе;
  • числу c присваивается суммарное количество элементов и псевдоэлементов.

После подсчета чисел у всех сравниваемых селекторов, селектором с большей специфичностью будет считаться тот, у которого больше число a , в независимости от величины чисел b и c . Если же у сравниваемых селекторов число a окажется одинаковым, будет сравниваться их число b , а в случае необходимости и число c (см. пример №2).

Пример №2. Сравнение специфичности селекторов

Виды и приоритет стилей CSS

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

    обладает наиболее низким приоритетом и применяется по умолчанию к элементам html -кода, к которым не применяется другое форматирование, говоря проще – к ‘голому’ html -коду. устанавливается в настройках браузера пользователем и по сути представляет собой измененный пользователем стиль браузера по умолчанию. Так что, если пользователь изменил стиль браузера, то по умолчанию станет применяться стиль пользователя. устанавливается автором страницы (программистом) и обладает еще большим приоритетом. Именно он нас и будет больше всего интересовать.

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

  • Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
  • Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т.е. раньше). Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента ‘link’ ниже в коде этого документа. Соответственно, если таблица подключена в коде документа выше, то приоритет ее стилей будет ниже.
  • Стили внутренних таблиц (расположены внутри контейнеров ‘style’) имеют приоритет перед стилями внешних таблиц, но только если они расположены в коде ниже, чем элемент ‘link’, при помощи которого была подключена внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько элементов ‘style’, то большим приоритетом обладают стили тех таблиц, которые расположены в коде документа ниже.
  • Еще большим приоритетом обладают встроенные стили, которые преобладают над правилами с любой специфичностью селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.

Служебный параметр !important

Отдельно следует сказать про служебный параметр !important (от англ. important – важный), который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css -свойства через пробел, например, p (см. пример №3). Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.

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

Из сказанного выше, следует простой вывод: чем ближе стиль расположен к элементу и чем более конкретнее его селектор, тем большим приоритетом он обладает.

Использование одинаковых свойств CSS в одном правиле

В заключение данного пункта добавим, что в одном и том же правиле иногда задают два одинаковых свойства, но с разными значениями (см. пример №4). Так обычно поступают, когда одно из значений свойства не поддерживается каким-нибудь браузером, тогда его помещают в блоке объявлений (стиле) вторым, а другое правило, которое поддерживается всеми браузерами, помещают первым. В результате, если страница открывается в браузере, в котором второе правило не имеет силы, оно будет проигнорировано, а браузер применит первое правило. Если же страница открывается в браузере, в котором имеют силу и первое и второе правила, то второе правило будет иметь больший приоритет, т.к. следует в коде позже. Таким образом, в любом случае будет реализована задумка программиста, а не применено значение свойства устанавливаемое браузером по умолчанию или наследуемое от родительского элемента.

Каскадность в CSS

Каскадность – приоритеты стилей в CSS

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

В учебнике по CSS для начинающих, мы узнали что внедрить CSS-код в HTML-документ, можно тремя способами:

  1. Через тег
  2. — внешний стиль, действует на весь сайт
  3. Через тег — внутренний стиль, действует на всю страницу
  4. Через атрибут style=» » — встроенный стиль, действует на один тег

Все эти три способа, образуют единый каскад стилей: внешний, внутренний, встроенный. У каждого способа имеется свой приоритет.

Допустим, с помощью внешнего стиля, вы назначили абзацам сайта p красный фон, его можно перебить внутренним стилем назначив всем абзацам одной страницы, зелёный фон, ну а внутренний стиль, можно перебить встроенным стилем, назначив выбранному абзацу синий фон.

Из этих трёх стилей, наибольший приоритет имеет встроенный стиль style=» «

Итак, на данный момент у нас имеется следующее, во внешнем стиле (CSS-файле), находится правило которое делает фон у всех абзацев сайта красным:

Во внутреннем стиле одной из страниц сайта находится правило, которое перебивает внешний стиль и делает фон у абзацев данной страницы, зелёным:


На этой странице, у одного абзаца есть встроенный стиль, который перебивает и внешние и внутренние стили, делая его фон синим:

Надеюсь, до этого момента всё ясно, идём дальше.

Стили браузера, автора и пользователя

Рассмотренные выше стили, называются стилями автора сайта (создателя сайта). Существуют еще два стиля — это стили браузера и стили пользователя.

Стили браузера — это стили по умолчанию, например если вы создали HTML-страницу, но еще не внедрили CSS-код, то браузер за вас назначает абзацам цвет шрифта черным, а размер 16px .

Стили пользователя — это стили которые задает посетитель сайта в настройках своего браузера, например в них можно прописать чтобы на всех сайтах, которые вы посещаете, шрифт у абзацев был равен 22px (это полезно делать, если у вас проблемы со зрением или на вебсайте на котором вы любите сидеть, слишком маленький шрифт).

Илон Маск рекомендует:  Обработка события

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

Теперь соберем в кучу все полученные знания на этом уроке и составим список чьи стили наиболее приоритетнее при просмотре сайта, начиная с самого маленького:

  • Стили браузера — самый маленький приоритет
  • Стили автора:
    • Внешний стиль — файл style.css
    • Внутренний стиль — тег
    • Встроенный стиль — атрибут style=» «
  • Стили пользователя — самый высокий приоритет

В основном, при создании сайтов вебмастера имеют дело с «внешним стилем», файлом style.css

Каскад в CSS — это одновременное применение разных по приоритету стилей, к HTML-элементам.

Приоритет в css

Довольно часто у новичков при изменении и добавлении стилевых значений происходит ошибка, возникшая по причине отсутствия понятия об приоритетах в css. Сколько бы они не пытались внедрить новшество в своём дизайне html при помощи css, у них ничего не получается.

А это легко поправимо, и сейчас на примерах я поясню, что существуют приоритеты в css, которые нужно обязательно учитывать.

Как вы начинаете понимать, приоритет в css для тега с указанием класса имеет степень выше, нежели с простым тегом.

А теперь представим, что у нас 2 таких параграфа с одним и тем же классом van , только один расположен ( как в примере ) в блоке с классом row , а другой в совершенно другом блоке. И наша задача придать зелёный цвет только тому параграфу, у которого родитель блок с классом row .
Для этого воплощения пропишем уже так:

В этом примере приоритетом в css будет запись .row .van <. >не потому что она прописана последней, а потому что в этой записи указан родитель параграфа.

Запомните!
Чем больше предков указано в записи css ( дерево родителей ), тем она будет более приоритетней.

При добавлении к записи значение !important её приоритет станет самым высоким независимо от указаниия предков и независимо от её местоположения ( в самом низу эта зпись сделана или в самом верху ).
Старайтесь использовать это дополнение к записи css только в исключительных случаях.

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

  • 1. — Перед тем, как переопределить любой объект в css, внимательно посмотрите уже прописанный для этого элемента код;
  • 2. — Новая ваша запись должна быть прописана ниже оригинальной записи и должна иметь приоритет по родителю не ниже уже прописанного.

Дата публикации: 20.05.2020

Приоритеты стилей CSS

Из всех стилевых правил, которые применяются к какому-либо элементу документа, всегда существует одно, обладающее приоритетом. Его можно найти, следуя следующим правилам:

Приоритет от источника.

Стиль, стоящий ближе к тегу, имеет более высокий приоритет, чем стиль, стоящий дальше от тега. К примеру, стиль, определенный в теге, имеет более высокий приоритет, чем стиль, стоящий во внешней таблице стилей.

Ранжируем стили по классу.

Свойства, заданные конкретно для тега, имеют более низкий приоритет, чем стилевые правила, заданные непосредственно для класса. К примеру, стилевое правило с классом ( h3.title_coment или просто .title_coment ) имеет более высокий приоритет, чем правило обращенное только к тегу( h3 ).

Ранжируем по специфичности.

Стилевые свойства, обладающие большей вложенностью, имеют приоритет над свойствами с меньшей вложенностью. К примеру, стилевое правило ( .dnzl h1 a ) имеет более высокий приоритет, чем правило заданное следующим образом: .dnzl a .

Приоритет от порядка.

Последнее стилевое правило (в таблице стилей, при прочих равных условиях) преобладает над всеми предыдущими.

Невозможно предсказать, какой приоритет имеют атрибуты над свойствами заданными в таблице стилей. Наверняка известно, что стилевые правила, в таблице стилей, определяющие цвет фона и переднего плана имеют более высокий приоритет над соответствующими атрибутами тегов. Хотя атрибут align в теге имеет более высокий приоритет, чем определенный в таблице стилей. Самый простой выход избежать путаницы – использовать в документе правила, прописанные во внешних таблицах стилей. В конце концов, для лучшего понимания сайта всегда следует отделять разметку от оформления.

метод определения приоритетов

Существует метод определения приоритетов. То есть существуют значения (в пунктах), которые назначаются каждому стилевому селектору ( id , класс, тег, встроенный стиль).


Схема назначения значений селекторам:

  • встроенный стиль – 1000 пункт
  • Класс – 10 пункт
  • ID – 100 пункт
  • Тег – 1 пункт

Чем больше совокупное значения селектора, тем приоритетнее его стилевое правило над другими селекторами.

Для лучшего понимания ниже я привел несколько простых примеров:

Приоритет и наследование в СSS на практике

По просьбам читателей сегодня я попытаюсь раскрыть такую важную тему в CSS, как приоритет и наследование. А так же вы узнаете о незаменимом помощнике в контексте сегодняшней темы, как для верстальщика, так и для front-end разработчика – веб-инспекторе.

О наследовании в CSS

Что нужно знать о наследовании в CSS при верстке сайтов? Рассмотрим это на примере фрагмента макета.

Верстальщик должен стремится не плодить лишний код, ведь для этого и существует принцип наследования. Верстка любой страницы начинается с тега body. Это значит, что мы прописываем цвет фона страницы и все атрибуты основного шрифта заранее в тег body (предок). То есть, все теги (p, div), что находятся внутри body, являются его потомками, они так же унаследуют белый фон и заданный шрифт, если мы не перебьем их другими свойствами.

Если для тега h1 зададим другие значения цвета и шрифта, в таком случае тег h1 уже не потомок body.

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

О приоритетах в CSS

Приоритетность таблиц стилей в порядке возрастания для верстальщика:

  1. таблицы стилей самого браузера
  2. внешний css файл, подключаемый к странице через
  3. таблицы стилей написанные на самой странице между тегами
  4. таблицы стилей внутри атрибута style=». «
  5. самый высокий приоритет у стилей с пометкой на конце important!

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

В каких случаях надо писать стили внутри страницы? Если, эта страница уникальна по дизайну, отличается от остальных.

Это была теория, на практике же все выглядит куда понятнее. Очень часто верстальщику приходится разбираться в чужом коде. Например стоит такая задача – изменить цветовую гамму страницы или всего сайта. Если этот условный сайт сверстан вручную и достаточно грамотно, то найти какие из стилей применены к тому или иному тегу, легко. Просто следуя тем существующим правилам приоритета и наследования. Смотрите какие стили на странице расположены ниже или специфичнее (#id против .class) и совсем уже явно – это !important, те и будут главнее.

Сущий ад начинается, если сайт работает например на WordPress-е. Там столько всего намешано: несколько CSS внешних файлов (wp темы, bootstrap-а, плагинов woocommerce, jetpack, виджетов, шорткодов) и это не считая styles внутри страниц. Как же в такой каше разобраться?

Волшебный веб-инспектор

Открываете искомую страницу в браузере Google Chrome Дополнительный инструменты Инструменты разработчика

Прямо на ваших глазах я поменяю цвет заголовка h1 с черного на сиреневый. Разумеется, что эта замена произошла виртуально, только в вашем браузере. После обновления браузера, будет как раньше. Вот таким быстрым способом, можно не открывая фотошоп, подобрать цветовую гамму, затем скопировать прямо из веб-инспектора новый код и вставить в файл CSS стилей. Вопрос только в какой, если их там целая куча?

Давайте разбираться пошагово:

  1. Нажать на стрелочку
  2. Выделить заголовок на сайте
  3. На DOM дереве выделится h1
  4. В правой части появится в самом верху селектор h1 с атрибутом color #111;
  5. Правее h1 вы увидите файл style.css, при наведении на который, появится путь до него

В нашем примере, это style.css темы WordPress-а. Это подтвердилось, тем, что мы щёлкнув по черному квадратику рядом с атрибутом color, выбрали другой цвет. Цвет изменился, значит файл стилей выбран верно.

Вся правая часть вкладки Styles описывает только тег h1.

The Red Baron – Dog Hat and Scarf Set

  • inherit from — история наследования
  • зачеркнутые строчки – переопределенные стили
  • injected stylesheet – внутренние стили внутри тега
  • user agent stylesheet – дефолтные стили браузера

В Styles отображаются все изменения, которые происходили с тегом h1. А вкладка Computed показывает – что в итоге осталось, окончательный вариант.

Как видите все не так страшно, при правке чужого кода, вам в помощь веб-инспектор. А когда вы сами верстаете с нуля, вы же двигаетесь поэтапно и сразу видите результат.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления


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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 3 ):

    Спасибо за статью — новичкам она будет очень полезна. ID имеет самый высокий приоритет который перебивает весь описанный вами список приоритетов — даже локальные стили. даже если и не перебил — указываем вложенность элементов, покуда стиль не будет перебит. так же упустили что один и тот же блок может иметь до 20 классов. в этом случае — самый высокий приоритет у класса который присвоен последним. important! — работает только в том случае, если перебиваем слили аналогичными полностью по вложенности и по названиям классов. Во всех остальных случаях он игнорится, потому что мах приоритет имеют вложенные стили с мах приоритетами (последний класс блока) либо ID если имеется. От себя добавлю — для тестов создайте 3 блок вложенных друг в друга, каждому блоку назначить свой фоновый цвет и перебивать фоновый цвет по схеме: 1. вложенность — все возможные комбинации с использованием всех блоков даже html 2. назначить локальные стили и перебивать внешним CSS файлом 3. все описанное выше + important! 4. дядя гугль не знает ответа,какие стили имеют самые высокие приоритеты 5. создайте несколько CSS файлов и перебивайте стили — оба файла должны перебивать одни и те же стили — научитесь перебивать стили первым подключенным файлом CSS, который имеет ниже приоритет нежели файл подключенный самым последним. У Вас наверное вопрос, зачем такой головняк, я отвечу, поработайте с онлайн библиотекой moodle — где все css файлы 20+ CSS файлов преобразуются PHP в 1 файл, от веселуха то будет, если не разбираетесь в приоритетах стилей и как их перебивать)))).

    вы так всех новичков здесь напугаете, после прочтения вашего коммента, у них сложится впечатление, что авторы статей щадят их нервы, скрывая страшную правду о коварном CSS, который мучает даже могучего дядьку Гугла. Это была шутка :)). А если серьезно, то человек слишком практичен, чтобы ломать голову, над тем, что ему сейчас не нужно. По мере углубления в процесс обучения, возникнут и другие вопросы, ответы на которые, найдутся в сообществах.

    Илон Маск рекомендует:  ins в HTML

    Еще раз спасибо автору за статью, очень многим она будет очень полезна + мой комент — даст возможность увидеть полную картину приоритетов. CSS сам по себе легкий, единственное что сложного в CSS — приоритеты стилей, на эту тему информация отсутствует вовсе, даже если и имеется, то корявая, где половина информации не соответствует действительности. Уж лучше со старта разобраться в приоритетах, тогда вовсе не важно в каком файле написан стиль css, его можно легко перебить.

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

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Приоритет стилей при включении двух внешних CSS файлов в HTML

    В HTML-документ включены два внешних источника с описанием стилей (с помощью link href=file.css ).

    Для одного из классов стиль задан в обоих файлах, притом с перекрывающимися атрибутами. Существует ли возможность добиться сделать одно из этих описаний «приоритетным»?

    Конкретика — при использовании icefaces стили страниц подгружены из файла royale.css , и среди них для ссылок ( .iceCmdLnk ) определён стиль у которого color:black, text-decoration:none .

    Я тут же пытаюсь включить ещё собственный файл ( general.css ), в котором хочу переопределить цвет ссылок на более привычный ( color:blue, text-decoration:underline ). Пытаюсь менять включения двух файлов местами — но эффекта не наблюдаю — ссылки остаются чёрными, в firebug мои стили помечены «зачёркнутым» (естественно стили из general.css для других элементов, не перекрытых работают нормально).

    Или я в чём-то глючу?

    3 ответа 3

    Приоритет можно установить:

    1. Указанием !important . Игнорируется IE.
    2. Более детальным описанием элемента ( li .link перекроет .link ).
    3. Порядком описания. Кто позже, тот и перекроет.

    Если к одному элементу одновременно применяются противоречивые стилевые правила, то более высокий приоритет имеет правило, у которого значение специфичности селектора больше. Специфичность это некоторая условная величина, вычисляемая следующим образом. За каждый идентификатор (в дальнейшем будем обозначать их количество через a) начисляется 100, за каждый класс и псевдокласс (b) начисляется 10, за каждый селектор тега и псевдоэлемент (c) начисляется 1. Складывая указанные значения в определенном порядке, получим значение специфичности для данного селектора.

    * <> /* a=0 b=0 c=0 -> специфичность = 0 */ li <> /* a=0 b=0 c=1 -> специфичность = 1 */ li:first-line <> /* a=0 b=0 c=2 -> специфичность = 2 */ ul li <> /* a=0 b=0 c=2 -> специфичность = 2 */ ul ol+li <> /* a=0 b=0 c=3 -> специфичность = 3 */ ul li.red <> /* a=0 b=1 c=2 -> специфичность = 12 */ li.red.level <> /* a=0 b=2 c=1 -> специфичность = 21 */ #t34 <> /* a=1 b=0 c=0 -> специфичность = 100 */ #content #wrap <> /* a=2 b=0 c=0 -> специфичность = 200 */

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

    Если два селектора имеют одинаковую специфичность, то применяться будет тот стиль, что определен в коде ниже.

    Приоритет селекторов в CSS

    Пояснения к статье:

    1. Селекторы — указатели, которые ссылаются на определенный элемент и изменяют его стилизацию.
    2. < background >— свойство фона в CSS.
    3. ul >, li >, div >, body > — HTML теги. Могут указываться в качестве селекторов.
    4. » style » — HTML тег, который позволяет изменить стилизацию элементов.

    Здравствуйте, в этой статье мы расскажем вам о том, как определяется каскадность страницы. Вы узнаете о приоритете стилей в CSS.

    Наверное у многих возникала такая проблема — некоторые стили применялись и отображались, а некоторые не работали. Почему так? Это связано с тем, что в CSS селекторы имеют свой приоритет, который влияет на их отображение.

    Если вы укажите один и тот же блок с помощью 2‑х селекторов и зададите 2 фона, то будет применен только один. Будет отображаться только то свойство background, селектор которого имеет более высокий приоритет.


    Давайте узнаем об этом подробнее.

    Селекторы и их приоритет

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

    Общие селекторы. Символ «*»

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

    Это свойство редко используется, а если и используется то для того, чтобы убрать отступы и задать позиционирование страницы.

    Приоритет селектора: 0

    Внимание! В строке «Приоритет селектора» будут указываться значения по возрастанию. То есть, чем ниже значение, тем ниже приоритет.

    Селекторы тегов

    Следующие по списку — селекторы тегов. Они используются для того, чтобы задать стили для определенного тега на веб-странице.

    Используется для создания общих стилей для каждого тега, так как применяется к каждому указанному тегу на странице.

    Приоритет селектора: 1

    Родительские и соседние селекторы. Псевдоселекторы.

    В этом пункте мы рассмотрим сразу несколько селекторов. Сюда относятся родительские селекторы, соседние селекторы и псевдоселекторы.

    Эти элементы используются чаще предыдущих, так как позволяют работать на более детализированном уровне, указывая стили для определенного участка веб-страницы.

    Чем больше указано селекторов, тем выше специфичность. То есть, если вы сделаете запись ul > li >, то специфичность будет равна 2. Если же указать селектор body > div > p > a >, то специфичность будет равна 4.

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

    Приоритет селектора: 3

    Классы в HTML/CSS.

    Далее идут классы, специфичность которых намного выше чем у тегов или родительских и соседских селекторов.

    Классы являются самыми популярными селекторами, так как могут применяться к разным элементам веб-страницы, которые находятся в разных местах.

    Повысить приоритет классов можно методом удвоения. Если вы укажите 2 класса в одном селекторе, то его приоритет возрастет в 2 раза.

    Внимание! Если вы укажите 2 одинаковых класса в одном селекторе, то принцип удвоения работать не будет. Это касается и остальных селекторов.

    Приоритет селектора: 4

    Селекторы идентификаторов.

    Далее идут селекторы с самым высоким приоритетом — идентификаторы.

    Это элементы, которые используются для стилизации отдельных элементов. Используются реже, так как применяются только к 1 тегу.

    С идентификаторами также работает принцип удвоения, но они и без этого имеют самый высокий приоритет.

    Приоритет селектора: 5

    Таблица специфичности

    В предыдущем разделе мы разобрали общий приоритет селекторов. Но есть также и таблица специфичности.

    Она показывает те же данные, но с большей точностью. В основном значения разнятся на 1-2, что большой роли не играет.

    Пару слов о теге «style»

    Теперь вы узнали всё о приоритете селекторов и можете их смело применять. Для примера задайте background > и шрифт в теге body >, можете создать свой класс или id >.

    После этого создайте тег » style «, в теге head >, и сбросьте все указанные свойства. Что у нас получилось? Исходная HTML страница.

    Это связано с тем, что специфичность селекторов тега style > равна 000. Из-за этого они перекрывают все внешние стили.

    Заключение

    Теперь вы знаете все о приоритетах и специфичности. Надеемся что вы больше не будете задаваться вопросом о том, почему не применяется фон или шрифт.

    Не обязательно запоминать таблицу специфичности. Главное запомнить общую расстановку приоритетов. Желаем вам удачи в изучении!


    Специфичность

    На этой странице

    Определение

    Специфичность — это способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены. Специфичность основана на правилах соответствия, состоящих из селекторов CSS различных типов.

    Как вычисляется специфичность ?

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

    Типы селекторов

    В следующем списке типы селекторов расположены по возрастанию специфичности:

    1. селекторы типов элементов (например, h1 ) и псевдоэлементов (например, ::before ).
    2. селекторы классов (например, .example ), селекторы атрибутов (например, [type=»radio»] ) и псевдокласов (например, :hover ).
    3. селекторы идентификаторов (например, #example ).

    Универсальный селектор ( * ), комбинаторы ( + , > ,

    , ‘ ‘) и отрицающий псевдокласс ( :not() ) не влияют на специфичность. (Однако селекторы, объявленные внутри :not() , влияют)

    Стили, обьявленные в элементе (например, style=»font-weight:bold» ), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

    Важное исключение из правил — !important

    Когда при объявлении стиля используется модификатор !important , это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important , то применен будет стиль с большей специфичностью.

    Несколько практических советов:

    • Всегда пытайтесь использовать специфичность, а !important используйте только в крайних случаях
    • Используйте !important только в страничных стилях, которые переопределяют стили сайта или внешние стили (стили библиотек, таких как Bootstrap или normalize.css)
    • Никогда не используйте !important , если вы пишете плагин или мэшап.
    • Никогда не используйте !important в общем CSS сайта.

    Вместо !important можно:

      Лучше использовать каскадные свойства CSS

    Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:

    Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).

    Вам придется использовать !important если:

    А) Первый сценарий:

    1. У вас есть общий файл стилей, устанавливающий правила для внешнего вида сайта.
    2. Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством — объявлением стилей непосредственно в элементах

    В таком случае вам придется объявить некоторые стили в вашем общем файле CSS как !important , переопределяя, таким образом, стили, установленные в самих элементах.

    Пример из практики: Некоторые плохо написанные плагины jQuery, использующие присваивание стилей самим элементам.

    Как сделать цвет текста в абзацах awesome красным всегда, даже если они расположены внутри #someElement ? Без !important у первого правила специфичность больше и оно имеет преимущество перед вторым.

    Как преодолеть !important

    A) Просто добавьте еще одно правило с модификатором !important , у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).

    Пример большей специфичности:

    Б) Или добавьте правило с модификатором !important и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):

    В) Или перепишите первоначальное правило без использования !important .

    С более подробной информацией можно ознакомиться по следующим ссылкам:

    Не исключение — :not()

    Отрицающий псевдокласс :not не учитывается как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри :not , при подсчете количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

    Илон Маск рекомендует:  HTML5 и CSS3 на примерах

    Следующий фрагмент CSS .

    . примененный к такому HTML .


    . отобразится на экране так:

    Это текст в div.inner

    Специфичность основана на форме

    Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор *[ ] считается селектором атрибута, даже при том, что ищет идентификатор.

    Эти объявления стилей .

    . примененные к нижеследующей разметке .

    . в результате выглядят так:

    Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.

    Независимость от расположения

    Взаимное расположение элементов, указанных в селекторе не влияет на специфичность правила. Следующие объявления стилей .

    . в сочетании со следующим HTML .

    Потому что, хотя оба объявления имеют одинаковое количество типов селекторов, но селектор html h1 объявлен последним.

    Непосредственно соответствующие элементы и унаследованные стили

    Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS .

    . тоже отобразится как:

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

    CSS урок 3. Каскадирование и принципы приоритетности

    В данном посте мы разбирем такую особенность CSS, как каскадность и приоритетность. Из урока по наследованию вы наверняка помните, что для одного и того же элемента веб-страницы может быть применено несколько правил. Значит, браузер должен как-то решить, какое правило будет наиболее приоритетным для конкретной ситуации. А решает он это с помощью специальной системы, которая, как неудивительно называется каскадностью.

    Тема эта очень важна и ее правильное понимание является необходимым условием для продуктивной работы с каскадными таблицами стилей. Поэтому постарайтесь максимально сконцентрироваться в ближайшие 20 минут, чтобы с первого раза освоить материал.

    Объединение унаследованных стилей

    Так уж сложилось, что вложенные элементы обычно наследуют свойства у своих родителей и предков. Рассмотрим следующую ситуацию:

    В примере выше мы задали семейство шрифта общему предку (body), размер — абзацам (p), и цвет — тегу em. На самой веб-странице мы увидим содержимое тега em шрифтом в 16px, семейства Arial и синего цвета. В нашем случае шрифт и размер были унаследованы от предка и родителя соответственно.

    Значит, вложенные элементы могут наследовать неконфликтующие свойства. Но что произойдет, если мы зададим одно и то же свойство с разными значениями родителю и предку?

    Преимущество имеет ближайший родительский элемент

    Рассмотрим следующие правила оформления для главного тега страницы и всех абзацев:

    Как вы думаете, каким цветом окрасится содержимое тега em, зеленым или красным? Конечно же красным (red), так как приоритет при наследовании всегда имеет свойство ближайшего родительского элемента. Учитывая вложенность тегов em в абзацы, их отображение красным цветом не вызывает удивления.

    Приоритет всегда отдается конкретному стилю

    А что будет, если к предыдущим правилам оформления мы зададим еще один? Например, цвет для того же тега em.

    В этом случае, вполне логично, содержимое тега окрашивается в синий цвет (blue), так как для него есть конкретный определяющий стиль. Это значит, что конкретный стиль имеет приоритет над унаследованными.

    При выборе браузером стиля для элемента веб-страницы выбор всегда падает в сторону конкретного стиля. Если его нет, то браузер выбирает стиль ближайшего родительского элемента и применяет его на дочерние.

    Распределение приоритетности между конкретными стилями CSS

    После уяснения вышезатронутых принципов каскадности, непроизвольно возникает вопрос — «Как распределяются приоритеты между конкретными правилами?» Ведь к одному и тому же элементу можно обращаться разными способами.

    Например, через селектор тегов, классов и идентификаторов. Рассмотрим следующий пример, в котором у нас есть один абзац на странице, имеющий класс ‘aly’ и идентификатор ‘main’. Для этого абзаца мы придадим разные цвета через соответствующие селекторы.

    Какое же правило возьмет верх? Ведь все они обращены к одному и тому же элементу. Не знаю, удивитесь вы или нет, но наш единственный абзац будет окрашен в синий цвет. А происходит это потому, что каждый вид обращения имеет свой уровень важности. Он хорошо показан на иллюстрации ниже.

    приоритетность в CSS

    Как видно из иллюстрации, правило применяемое через селектор тегов имеет 1 балл значимости, класс — 10, а идентификатор — 100 баллов. Самая высокая значимость присуждается встроенным стилям, имеющим 1000 единиц важности. Встроенный стиль представляет из себя CSS правило, находящееся внутри html разметки:

    При наличии подобного встроенного стиля, абзац будет окрашен в зеленый цвет (green). Однако, использование подобной техники оформления является нежелательным по двум причинам:

    • html разметка не предназначена для оформления;
    • могут возникнуть трудности при изменении оформления элемента, имеющего встроенный стиль, ведь любые обращения к ней через внешнюю таблицу стилей ничего не даст.


    Приоритетность не имеет значения в случае наследуемых свойств.

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

    Из примера выше мы видим, что абзацы внутри блочного элемента с идентификатором ‘main’ будут окрашены в зеленый цвет (green). Хотя, на первый взгляд может показаться что правило для ‘#main’ более важно, нужно помнить что оно обращено к div`у, а не напрямую к абзацу. И здесь срабатывает правило о более конкретном стиле, согласно которому абзацы будут окрашены в зеленый цвет. Словом, приоритетность не наследуется потомками.

    В таблице ниже вы можете увидеть пример того, как могут суммироваться баллы для разных селекторов.

    таблица приоритетностей в CSS

    Последний стиль сродни окончательному решению

    Может случиться так, что правила для одного и того же элемента могут иметь одинаковый балл по приоритетности. Как в этом случае поступит браузер? Какому CSS правилу он отдаст предпочтение? Рассмотрим на примере ниже.

    У нас есть два форматирующих правила для одного и того же тега strong с классом bold, находящийся внутри абзаца с классом alive. Оба стиля имеют одинаковую важность — 11 баллов. Какому правилу браузер отдаст пальму первенства?

    В равной схватке побеждает второе правило, так как оно указано последним, читай — является самой актуальной. Но что если у нас есть стиль, который мы хотим наверняка определить для тега strong?

    У нас может быть таблица стилей внушительных размеров, по причине чего становится довольно сложно использовать селектор с правильной приоритетностью, не говоря уже о возможности наличия где-нибудь встроенных стилей. Для решения данной задачи мы можем воспользоваться значением !important. Ее необходимо прописать к необходимому свойству.

    При использовании такой записи все остальные свойства цвета будут игнорироваться браузером. Однако, нужно использовать данный прием с осторожностью, ведь применив его один раз, вы теряете контроль над данным свойством в будущем, пока не избавитесь от этого значения (!important).

    Хитрость: гибкое использование правила последней записи

    Одной из сложностей создания больших сайтов является необходимость использовать нестандартные стили для определенных страниц. То есть, для одних и тех же элементов разных страниц может понадобится использовать разные стили. Но как этого добиться?

    Как вариант можно использовать правило последней (самой актуальной) записи. Например, для такой «нестандартной» страницы можно подключить отдельную таблицу стилей, содержащую особенные правила форматирования. Только нужно не забыть подключить этот файл после основной таблицы стилей, чтобы отменить предыдущие правила. Вот вам и хитрость:-)

    Опасность частого использования селекторов по ID

    Советую вам с осторожностью использовать селектор идентификаторов. Наличие у неё большого балла приоритетности может стать причиной проблем оформления вашего сайта. Обратите внимание на стили ниже.

    Согласно первому правилу мы задаем черный цвет для всех абзацев внутри блока с идентификатором ‘main’. Затем мы хотим выделить абзац с классом ‘letter’ отдельным цветом. Он находится внутри блока с идентификатором ‘main’.

    Но сделать это не получится по той причине, что первый стиль имеет 101 балл значимости, а второй всего лишь 11. Это пример того, какие трудности могут быть при использовании селектора по идентификатору. Можно конечно, использовать другую запись:

    Однако, проблему она решает лишь частично, так как действует только на абзацы внутри блока с идентификатором ‘main’. На абзацы с классом ‘letter’, находящиеся в других блоках она не подействует. Посему, будьте внимательны.

    Итак, на этом урок по каскадности можно считать завершенным. Если есть вопросы или мысли по данной теме, буду рад видеть их в комментариях. Надеюсь, данный урок по CSS был для вас полезен. Если это так:

    1. Сделайте репост данной статьи в социальных сетях, чтобы больше людей получили от нее пользу;
    2. [popup_trigger >Подписывайтесь [/popup_trigger] на мою рассылку, чтобы не пропустить полезные и интересные публикации на блоге.

    На этом я с вами не прощаюсь. Спасибо за внимание и до встречи в следующих публикациях!

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

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

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

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

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

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

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

    Специфичность селекторов (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-1 4
    li:first-line 0-0-0-2 4
    ul li 0-0-0-2 4
    ul ol+li 0-0-0-3 4
    form + *[type=text] 0-0-1-1 3, 4
    table tr td.second 0-0-1-3 3, 4
    h2.block.title. 0-0-2-1 3, 4
    #xyz 0-1-0-0 2
    style=» « 1-0-0-0 1

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

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

    Правило №2:

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

    Правило №3:

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

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

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

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

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

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


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

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

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL