Поделиться через

Общие сведения о селекторах CSS

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

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

  • Правила стилей 
  • Дерево документа 
  • Селекторы и блоки объединения 
  • Псевдоклассы и псевдоэлементы 
  • Порядок каскадирования и специфичность 
  • Поддержка селекторов в различных версиях Internet Explorer 
  • Связанные разделы

Правила стилей

Правило стиля — это выражение, которое сообщает браузеру, как отображать определенные элементы на HTML-странице. Правило состоит из селектора, за которым следует блок объявлений. Блок объявлений — это фрагмент, заключенный в фигурные скобки ({}). Например, следующее правило стиля изменяет отображение элементов H1 по умолчанию.

селектор  блок объявлений

--------  -----------------------------

H1        { font-variant: small-caps; }

            ------------  ----------

            свойство      значение

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

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

Дерево документа

Дерево документа — это иерархическая структура элементов, используемая в коде HTML-файла. Все взаимосвязи между элементами дерева можно описать в терминах предков и потомков. Каждый элемент дерева, за исключением корневого, имеет единственного родителя и может иметь дочерние и одноуровневые элементы. Стили применяются к элементам в дереве документа на основании их типов, их относительного положения в иерархии, а также атрибутов, например ID или class.

Селекторы и блоки объединения

Простой селектор — это либо селектор типа, либо универсальный (*) селектор. После простого селектора могут указываться атрибуты ID или classes, а также псевдоклассы в любом порядке. Правило стиля применяется, если данный элемент соответствует селектору. Ниже приведены примеры простых селекторов.

H1              { color:blue; }

#myID           { color: red; }

#myID:hover     { color: orange; }

P.myClass       { color: green; }

P.myClass:hover { text-decoration: underline; }

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

H1 + H2 { margin-top: -5mm; }

Для уменьшения размера таблиц стилей селекторы могут объединяться в списки с разделителями-запятыми. Запятые не являются символами объединения. Это просто удобное средство для применения одного блока объявлений к нескольким типам элементов.

H1, H2, H3 { font-family: helvetica; }

Примечание.   При объединении селекторов помните, что после запятой указывается совершенно новый селектор.

Псевдоклассы и псевдоэлементы

Правила стилей применяются к элементам согласно их положению в дереве документа. Однако в CSS также используются псевдоклассы и псевдоэлементы, которые позволяют применять особое форматирование, которое невозможно распознать в дереве документа. Псевдоэлементы служат для определения стилей частей элементов (например, :first-letter или :first-line), а псевдоклассы — для классификации элементов по признакам, отличным от их имени, атрибутов или содержимого (например, :first-child, :visited или :hover). Обычно псевдоклассы являются динамическими в том смысле, что элемент может приобретать или терять псевдокласс в процессе взаимодействия пользователя с документом.

P:first-child:first-line { text-transform: uppercase; }

Примечание.   При объединении селекторов селекторы типов всегда должны указываться раньше псевдоэлементов. Другие элементы (class, ID или псевдо-классы) могут указываться в любом порядке.

Порядок каскадирования и специфичность

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

  1. Найдите все объявления, включая наследуемые, для целевого типа @media.
  2. Отсортируйте объявления по весу и источнику. Таблицы стилей разработчика имеют приоритет над пользовательскими таблицами стилей, которые, в свою очередь, имеют приоритет над таблицами стилей браузера по умолчанию. Исключением являются пользовательские объявления, помеченные как «!important». Объявления !important имеют более высокий приоритет.
  3. Выполните сортировку по специфичности селектора: более специфичные селекторы имеют приоритет над более общими селекторами. Для определения значения специфичности необходимо объединить число атрибутов ID, число атрибутов класса и псевдокласса и число имен типов и псевдоэлементов в селекторе.
    Например, к элементу LI может применяться каждый из приведенных ниже селекторов. Однако в случае конфликта применяются только наиболее специфичные объявления.

    *             {}  /* a=0 b=0 c=0 -> специфичность =   0 */

    li            {}  /* a=0 b=0 c=1 -> специфичность =   1 */

    ul li         {}  /* a=0 b=0 c=2 -> специфичность =   2 */

    li:first-line {}  /* a=0 b=0 c=2 -> специфичность =   2 */

    ul ol+li      {}  /* a=0 b=0 c=3 -> специфичность =   3 */

    li.class      {}  /* a=0 b=1 c=1 -> специфичность =  11 */

    li#id         {}  /* a=1 b=0 c=1 -> специфичность = 101 */

  4. Выполните сортировку в порядке определения: если два правила имеют одинаковый вес и специфичность, указанное позднее имеет приоритет. (Обратите внимание, что таблицы стилей, для которых определено правило @import, обрабатываются в первую очередь.) Селекторы, определенные позднее в таблице стилей, будут использоваться при возникновении конфликта. По этой причине селекторы псевдокласса link должны всегда использоваться в следующем порядке.

    A:link {}

    A:visited {}

    A:hover {}

    A:active {}

Поддержка селекторов в различных версиях Internet Explorer

В следующей таблице перечислены селекторы, которые в настоящее время распознаются Windows Internet Explorer, с указанием версии Internet Explorer, в которой была добавлена их поддержка.

Простые селекторы Версия Internet Explorer
Тип, группировка 3
Класс, ID 3
Универсальный (*) 5.0
Блоки объединения  
Потомок (   ) 3
Дочерний элемент (>) 7
Соседний элемент того же уровня (+) 7
Селекторы атрибутов  
Равенство [=] 7
Существование [] 7
Дефис [|=] 7
Префикс [^=] 7
Подстрока [*=] 7
Суффикс [$=] 7
Пробел [~=] 7
Псевдоклассы и псевдоэлементы  
:link, :visited 3
:hover†, :active†† 4
:first-letter, :first-line 5.5
:first-child 7
:before, :after 8
:focus 8
:lang(C) 8

†Применимость селектора :hover была распространена на все элементы в Internet Explorer 7.

††Применимость селектора :active была распространена на все элементы в Internet Explorer 8.

Связанные разделы