5.9 KiB

Raw Blame History

title	localeTitle
Selectors	Селекторы

Селекторы

Селекторы - это правила CSS для таргетинга на HTML-элементы для применения стилей. Имена тегов, имена классов, идентификаторы и атрибуты - это некоторые из перехватчиков, используемых в качестве селекторов.

Синтаксис селектора

Селекторы, расположенные в определенной последовательности, будут создавать правило для целевых элементов. Пример,

/* selects anchor tags */ 
 a { 
    color: orange; 
 } 
 
 /* selects elements with hero class */ 
 .hero { 
    text-align: center; 
 }

Тип переключателей

Тип | Описание ------- | ------------ Селекторы типов | Имена тегов используются для выбора таких элементов, как h1 или a . Универсальный селектор | Селектор, который применяется ко всем элементам. div * соответствует всем элементам в элементах div. Селектор атрибутов | Селекторы, которые нацеливают элементы на основе их атрибутов [и, необязательно, их значений]. h1[title] выбирает элементы h1 с атрибутом title . Селектор классов | Селектор, который предназначен для элементов, используя их имена классов. ID Selector | Селектор, который использует идентификатор для целевых элементов. #logo выбирает элемент с logo качестве идентификатора. Селектор псевдокласса | Специальные селекторы, которые нацелены на элементы, основанные на их состоянии. a:hover селектор a:hover применяет стиль, когда указатель наводится на ссылки.

Комбинаторы селектора

Комбинатор | Цель ----------- | ------------ white space | Комбинатор потомков. .nav li выбирает все li - .nav в классе .nav , включая вложенные элементы li . > | Детский комбинатор. .menu > li выбирает все li, которые являются прямыми .menu элементами элементов с классом .menu . + | Смежный комбинатор. .logo + h1 целей h1 , что является непосредственным родственным к .logo класса. ~ | Общий сборщик. header ~ div target div элементы, которые являются братьями и сестрами для элементов header .

В этом разделе описываются все эти избиратели.

Дополнительная информация:

Вы можете узнать больше о селекторах на этих ресурсах:

Селекторы в CSS (каскадные таблицы стилей) определяются на основе специфики , с этим мы можем быть более конкретными в наших правилах стиля и переопределять другие правила, которые могут быть нацелены на один и тот же элемент, но не являются конкретными. Способ работы этой иерархии конкретных оснований зависит от веса, то есть элемент Селектор имеет вес 1 (один), селектор класса имеет вес 10 (десять), а селектор id имеет вес Сто (100). Мы можем комбинировать разные селекторы вместе, более конкретно, от элемента, который мы хотим изменить.

В качестве примера:

css p { color: blue; } p .red { color: red; } Наш селектор типов p выберет все элементы p в нашем html-документе, но он будет иметь только один вес. напротив, селектор классов имеет вес 11 по той причине, что мы объединяем селектор типов с селектором классов (этот селектор сопоставляет все элементы p с классом красного). - * Прямо целевые правила всегда будут иметь приоритет над правилами, которые наследуют элементы от своего предка. - * Спецификация применяется только тогда, когда несколько объявлений нацелены на один и тот же элемент, только тогда это правило применяется.
- * Спецификация, как правило, почему некоторые из правил стиля не применяются к элементам, если вы ожидаете их.

5.9 KiB Raw Blame History Unescape Escape