From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../index.html" | 235 +++++++++++++++++++++ 1 file changed, 235 insertions(+) create mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" (limited to 'files/ru/learn/css/building_blocks/селекторы/index.html') diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" new file mode 100644 index 0000000000..3819af4207 --- /dev/null +++ "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" @@ -0,0 +1,235 @@ +--- +title: Селекторы CSS +slug: Learn/CSS/Building_blocks/Селекторы +tags: + - Attribute + - Beginner + - CSS + - Learn + - Pseudo-class + - Pseudo-element + - id + - Обучение + - Псевдоэлемент + - псевдокласс + - селектор +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:Узнать, как работают CSS-селекторы.
+ +

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

+ +

Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

+ +

Some code with the h1 highlighted.

+ +

Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

+ +

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые Вы встретите, определены в Спецификации селекторов 3 уровня, где Вы сможете найти всю информацию о поддержке селекторов в браузерах.

+ +

Несколько селекторов

+ +

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

А могу написать короче — просто отделив селекторы запятыми:

+ +
h1, .special {
+  color: blue;
+}
+ +

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

+ +
h1,
+.special {
+  color: blue;
+}
+ +

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

+ +

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Типы селекторов

+ +

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

+ +

Селекторы тегов, классов и идентификаторов

+ +

К этой группе относятся селекторы HTML-элементов, таких как <h1>.

+ +
h1 { }
+ +

К группе относятся и селекторы классов:

+ +
.box { }
+ +

или селекторы идентификаторов (ID):

+ +
#unique { }
+ +

Селекторы атрибутов

+ +

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

+ +
a[title] { }
+ +

или основываясь на значении атрибута:

+ +
a[href="https://example.com"] { }
+ +

Псевдоклассы, псевдоэлементы

+ +

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши

+ +
a:hover { }
+ +

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

+ +
p::first-line { }
+ +

Комбинаторы

+ +

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):

+ +
article > p { }
+ +

Продолжение

+ +

Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или Вы можете двинуться дальше: нас ждут селекторы тегов, классов и идентификаторов.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Справка о селекторах

+ +

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторПримерРуководство
Селектор по типуh1 {  }Селектор по типу
Универсальный селектор* {  }Универсальный селектор
Селектор класса.box {  }Селекторы классов
Селектор ID#unique { }Селекторы по ID
Селектор атрибутов a[title] {  }Селекторы атрибутов
Селектор псевдоклассовp:first-child { }Псевдоклассы
Селектор псевдоэлементовp::first-line { }Псевдоэлементы
Селектор потомковarticle pСелектор потомков
Селектор дочерних элементовarticle > pСелектор дочерних элементов
Смежные селекторыh1 + pСмежные селекторы
Селектор братских элементовh1 ~ pСелектор братских элементов
+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. CSS-селекторы + +
    3. +
  3. Блоки в CSS
    4. +
  4. Фон и границы
    5. +
  5. Изменение направления текста
    6. +
  6. Перекрытие содержимого
    7. +
  7. Значения свойств CSS
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Изображения, формы и прочие медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация CSS-кода
    13. +
-- cgit v1.2.3-54-g00ecf