Базовые селекторы
Как было сказано выше, каждое правило CSS состоит из селектора и набора деклараций. Декларации определяют свойства отображения, а селектор указывает, к каким именно элементам документа именно эти декларации должны применяться (такие элементы называются субъектами этого селектора). Начнем с формального определения селекторов.
Базовый селектор - Универсальный селектор или селектор типа.
Универсальный селектор - Символ звездочка (*), означающий, что его субъектами являются все элементы документа. Если звездочка является не единственной составляющей селектора, то она может опускаться.
Селектор типа - Совпадает с именем элемента в документе и указывает, что его субъектами являются все элементы документа с данным именем.
Простой селектор - Базовый селектор, за которым следуют нуль или более селекторов атрибутов, селекторов идентификаторов или псевдоклассов (в любом порядке).
Составной селектор - Образуется из простых селекторов соединением их с помощью специальных символов.
Как мы видим, основу этих определений составляют базовые селекторы. Поясним их определения примерами:
* { font-family: sans-serif } /* Применяется ко всем элементам документа */ H1 { font-family: sans-serif } /* Применяется ко всем элементам H1 */
Если несколько селекторов имеют одинаковые декларации, то их можно сгруппировать, т. е. объединить в одно правило, перечислив селекторы через запятую. Например, следующий набор правил
H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif } эквивалентен одному правилу
H1, H2, H3 { font-family: sans-serif }
Поддержка : | | Полное соответствие стандарту (5.0+) | | | Не поддерживает универсальные селекторы (4.0+) |
Селекторы классов
Для HTML-документов CSS поддерживает селекторы классов, которые основаны на использовании атрибута class и имеют вид element.class. Пусть, например, наша таблица стилей содержит правило
P.warning { font-style: italic }
Тогда следующий элемент HTML-документа
<P class="warning">Рекомендуется выбирать названия классов, отражающие их назначение.</P>
будет отображаться курсивным шрифтом:
Рекомендуется выбирать названия классов, отражающие их назначение.
Селектор класса может не содержать названия элемента, например
.warning { font-style: italic }
Такое правило относится ко всем элементам, имеющим атрибут class="warning".
Примечание. Селектор класса, не содержащий имени элемента, следует понимать как селектор *.class, в котором универсальный селектор * опущен.
CSS позволяет задавать и подмножества значения атрибута class, например правило
P.warning.red { font-style: italic }
будет применимо к элементам с атрибутом class="warning red blue", но не применимо к элементам с атрибутом class="warning blue".
Поддержка : | | Полное соответствие стандарту (5.0+) | | | Не поддерживает множественные классы (4.0+) |
1 2 3
8 8 8
| |