Что такое селектор CSS?

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, все будет в порядке.

Оцените статью
Solutics.ru
Добавить комментарий