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