5.6 KiB
| title | localeTitle |
|---|---|
| CSS Selectors Cheat Sheet | Селекторы CSS |
Селекторы CSS
В CSS селекторами являются шаблоны, используемые для выбора элементов DOM.
Вот пример использования селекторов. В следующем коде a и h1 являются селекторами:
a {
color: black;
}
h1 {
font-size 24px;
}
Чит-лист селекторов
| Селектор | Выбор |
| --- | --- | | head | выбирает элемент с head тегом |
| .red | выбирает все элементы с «красным» классом |
| #nav | выбирает элементы с идентификатором «nav» |
| div.row | выбирает все элементы с тегом div и классом 'row' | | [aria-hidden="true"] | выбирает все элементы с атрибутом aria-hidden со значением «true» | | * | Селектор подстановочных знаков. Выбирает все элементы DOM. См. Ниже для использования с другими селекторами |
Мы можем комбинировать селекторы интересными способами. Некоторые примеры:
| Селекторы | Выбор |
| --- | --- | | li a | DOM потолочный комбинатор. Все a теги, которые ребенок li теги |
| div.row * | выбирает все элементы, которые являются потомками (или дочерними) элементов с тегом div и классом 'row' |
| li > a | Разностный комбинатор. Выберите прямых потомков, а не всех потомков, таких как селектор потомков |
| li + a | Смежный комбинатор. Он выбирает элемент, которому предшествует предыдущий элемент. В этом случае только первый a после каждого li . |
| li, a | Выбирает все элементы и все a li элементы. |
| li ~ a | Комбинированный брат. Выбор a элемент следующего в li элемента. |
Псевдо-селекторы или псевдоструктурные классы также полезны для выбора структурных элементов из DOM. Вот некоторые из них:
| Селекторы | Выбор | | --- | --- |
| :first-child | Задайте первый элемент сразу внутри (или дочернего элемента) другого элемента |
| :last-child | Задайте последний элемент сразу внутри (или дочернего элемента) другого элемента |
| :nth-child() | Задайте n-й элемент сразу внутри (или дочернего элемента) другого элемента. Принимает целые числа, even , odd или формулы |
| a:not(.name) | Выбирает все элементы, которые не из a .name класса |
| ::after | Позволяет вставлять содержимое на страницу из CSS вместо HTML. Хотя конечный результат на самом деле отсутствует в DOM, он появляется на странице так, как если бы он был. Этот контент загружается после элементов HTML. |
| ::before | Позволяет вставлять содержимое на страницу из CSS вместо HTML. Хотя конечный результат на самом деле отсутствует в DOM, он появляется на странице так, как если бы он был. Это содержимое загружается перед элементами HTML. |
Мы можем использовать псевдоклассы для определения специального состояния элемента DOM, но не будем указывать на элемент самостоятельно. Некоторые примеры:
| Псевдокласс | Выбор | | --- | --- | | :hover | выбирает элемент, который наводится указателем мыши |
| :focus | выбирает элемент, получающий фокус с клавиатуры или программы | | :active | выбирает элемент, щелкнув указателем мыши |
| :link | выбирает все ссылки, которые еще не были нажаты |
| :visited | выбирает ссылку, которая уже нажата |
Игры
CSS Diner - это веб-игра, которая учит почти всему, что нужно знать о объединении селекторов.
Дополнительная ссылка
Есть еще много селекторов CSS! Узнайте о них в CodeTuts , CSS-tricks.com , w3schools.com или в Mozilla Developer Network .