48 lines
5.9 KiB
Markdown
48 lines
5.9 KiB
Markdown
|
---
|
|||
|
|
title: Selectors
|
|||
|
|
localeTitle: Селекторы
|
|||
|
|
---
|
|||
|
|
# Селекторы
|
|||
|
|
|
|||
|
|
Селекторы - это правила CSS для таргетинга на HTML-элементы для применения стилей. Имена тегов, имена классов, идентификаторы и атрибуты - это некоторые из перехватчиков, используемых в качестве селекторов.
|
|||
|
|
|
|||
|
|
## Синтаксис селектора
|
|||
|
|
|
|||
|
|
Селекторы, расположенные в определенной последовательности, будут создавать правило для целевых элементов. Пример,
|
|||
|
|
|
|||
|
|
```css
|
|||
|
|
/* 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](https://www.w3.org/TR/css3-selectors)
|
|||
|
|
* [Селекторная страница в Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors)
|
|||
|
|
* [CSS-селектор Cheat Sheet на FreeCodeCamp](https://guide.freecodecamp.org/css/tutorials/css-selectors-cheat-sheet)
|
|||
|
|
|
|||
|
|
Селекторы в CSS (каскадные таблицы стилей) определяются на основе _специфики_ , с этим мы можем быть более конкретными в наших правилах стиля и переопределять другие правила, которые могут быть нацелены на один и тот же элемент, но не являются конкретными. Способ работы этой иерархии конкретных оснований зависит от веса, то есть элемент Селектор имеет вес 1 (один), селектор класса имеет вес 10 (десять), а селектор id имеет вес Сто (100). Мы можем комбинировать разные селекторы вместе, более конкретно, от элемента, который мы хотим изменить.
|
|||
|
|
|
|||
|
|
В качестве примера:
|
|||
|
|
|
|||
|
|
`css p { color: blue; } p .red { color: red; }` Наш селектор типов p выберет все элементы p в нашем html-документе, но он будет иметь только один вес. напротив, селектор классов имеет вес 11 по той причине, что мы объединяем селектор типов с селектором классов (этот селектор сопоставляет все элементы p с классом красного). - \* Прямо целевые правила всегда будут иметь приоритет над правилами, которые наследуют элементы от своего предка. - \* Спецификация применяется только тогда, когда несколько объявлений нацелены на один и тот же элемент, только тогда это правило применяется.
|
|||
|
|
\- \* Спецификация, как правило, почему некоторые из правил стиля не применяются к элементам, если вы ожидаете их.
|