CSS использует правила сопоставления с образцом, чтобы определить, какой стиль применяется к какому элементу в документе. Эти шаблоны называются селекторами и варьируются от имен тегов (например,
p
для соответствия тегам абзаца) очень сложным шаблонам, которые соответствуют очень конкретным частям документа (например,
p # myid> b.highlight
будет соответствовать любому тег
b
с классом
highlight
, который является потомком абзаца с идентификатором
myid
).
Селектор CSS – это часть вызова стиля CSS, который определяет, какая часть веб-страницы должна быть стилизована. Селектор содержит одно или несколько свойств, которые определяют стиль выбранного HTML.
Селекторы CSS
Существует несколько различных типов селекторов:
- селекторы типа – соответствующие определенному элементу
- селекторы классов – сопоставление элементов с определенным классом
- Селекторы идентификаторов – сопоставление элемента с определенным идентификатором
- селекторы потомков – совпадающие элементы, которые являются потомками определенного элемента
- дочерние селекторы – соответствующие элементы, которые являются дочерними для определенного элемента
- универсальные селекторы – соответствующие любому элементу
- селекторы смежных братьев и сестер – совпадающие элементы, которым непосредственно предшествует определенный элемент
- селекторы атрибутов – сопоставление элементов с определенным атрибутом или значением атрибута
- селекторы псевдоклассов – сопоставление элементов с определенным псевдоклассом
- селекторы псевдоэлементов – сопоставление элементов с определенными свойствами псевдоэлементов
Форматирование стилей CSS и селекторов CSS
Формат стиля CSS выглядит следующим образом:
selector {style свойство: style; }
Разделяйте запятыми несколько селекторов, имеющих одинаковый стиль. Это называется группировкой селекторов. Например:
selector1 , selector2 {свойство style: style; }
Группировка селекторов – это сокращенный механизм для сохранения компактности ваших стилей CSS. Вышеуказанная группировка будет иметь тот же эффект, что и:
selector1 {свойство style: style; }
selector2 {свойство style: style; }
Всегда проверяйте свои селекторы CSS
Не все браузеры поддерживают все селекторы CSS. Поэтому не забудьте протестировать ваши селекторы в максимально возможном количестве браузеров на всех операционных системах. Но если вы используете селекторы CSS1 или CSS2, все будет в порядке.
