5.9 KiB
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
.
В этом разделе описываются все эти избиратели.
Дополнительная информация:
Вы можете узнать больше о селекторах на этих ресурсах:
- Официальная спецификация CSS3
- Селекторная страница в Mozilla Developer Network
- CSS-селектор Cheat Sheet на FreeCodeCamp
Селекторы в CSS (каскадные таблицы стилей) определяются на основе специфики , с этим мы можем быть более конкретными в наших правилах стиля и переопределять другие правила, которые могут быть нацелены на один и тот же элемент, но не являются конкретными. Способ работы этой иерархии конкретных оснований зависит от веса, то есть элемент Селектор имеет вес 1 (один), селектор класса имеет вес 10 (десять), а селектор id имеет вес Сто (100). Мы можем комбинировать разные селекторы вместе, более конкретно, от элемента, который мы хотим изменить.
В качестве примера:
css p { color: blue; } p .red { color: red; }
Наш селектор типов p выберет все элементы p в нашем html-документе, но он будет иметь только один вес. напротив, селектор классов имеет вес 11 по той причине, что мы объединяем селектор типов с селектором классов (этот селектор сопоставляет все элементы p с классом красного). - * Прямо целевые правила всегда будут иметь приоритет над правилами, которые наследуют элементы от своего предка. - * Спецификация применяется только тогда, когда несколько объявлений нацелены на один и тот же элемент, только тогда это правило применяется.
- * Спецификация, как правило, почему некоторые из правил стиля не применяются к элементам, если вы ожидаете их.