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