From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../guide/css/getting_started/selectors/index.html | 433 +++++++++++++++++++++ 1 file changed, 433 insertions(+) create mode 100644 files/ru/web/guide/css/getting_started/selectors/index.html (limited to 'files/ru/web/guide/css/getting_started/selectors/index.html') diff --git a/files/ru/web/guide/css/getting_started/selectors/index.html b/files/ru/web/guide/css/getting_started/selectors/index.html new file mode 100644 index 0000000000..7af11a31e1 --- /dev/null +++ b/files/ru/web/guide/css/getting_started/selectors/index.html @@ -0,0 +1,433 @@ +--- +title: Selectors +slug: Web/Guide/CSS/Getting_started/Selectors +translation_of: Learn/CSS/Building_blocks/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Это пятый раздел руководства CSS для начинающих. В нем объясняется, как можно выборочно применять стили и каким образом различные типы селекторов имеют разные приоритеты.  

+ +

Некоторые атрибуты добавляются к тегам в шаблоне документа, и эти атрибуты используются в шаблоне таблицы стилей.

+ +

Информация: Селекторы

+ +

Ранее мы уже встречались с селекторами. Мы создали строку в файле стилей следующего вида:

+ +
strong {
+  color: red;
+}
+
+ +

В терминологии CSS эта строка полностью является правилом CSS. Это правило начинается со strong, что и называется селектором CSS. Селектор выбирает, к каким элементам DOM применяется правило.

+ +
+
Подробности
+ +

Часть внутри фигурных скобок называется объявлением.

+ +

Ключевое слово color - свойство, а red - значение.

+ +

Точка с запятой после пары "свойство-значение" отделяет её от других пар "свойство-значение" в том же объявлении.

+ +

Этот учебник ссылается на селектор типа strong как на селектор тега. Спецификация CSS ссылается на него как на селектор типа.

+
+ +

На этой странице учебника объясняются дополнительные сведения о селекторах, которые можно использовать в правилах CSS.

+ +

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

+ +

Два атрибута имеют особый статус в CSS. Это class и id.

+ +

Селекторы классов

+ +

Используйте атрибут class в элементе, чтобы назначить элемент именованному классу. Выбор имени класса целиком за вами. Множество элементов в документе может иметь одно и то же значение класса.

+ +

В вашей таблице стилей используйте точку перед именем класса для использования его в качестве селектора.

+ +

Селекторы ID

+ +

Используйте атрибут id в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.

+ +

В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.

+ +
+
Пример
+Этот HTML тэг имеет оба элемента, атрибут class и id: + +
<p class="key" id="principal">
+
+ +

Значение идентификатора id, principal, должно быть уникально в документе, но разные тэги в документе, могут иметь одинаковое имя class со значением key.

+ +

Это правило делает все классы(class) со значениемkey зелёными. (Они даже не должны быть все элементами {{ HTMLElement("p") }}.)

+ +
.key {
+  color: green;
+}
+
+ +

Это правило делает один элемент с идентификатором (id) и значением principal полужирным:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

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

+ +

Вы не ограничены двумя специальными атрибутами, class и id. Вы можете определить другие атрибуты используя квадратные скобки. Внутри скобок вы задаёте имя атрибута, так же можно указать оператор соответствия и значение. Дополнительно, соответствие может быть установлено как чувствительное к регистру если дописать " i" после значения, но пока не все браузеры это поддерживают. Примеры:

+ +
+
[disabled]
+
Выбирает все элементы с атрибутом "disabled".
+
[type='button']
+
Выбирает элементы с типом "button".
+
[class~=key]
+
Выбирает элементы со значением класса(class) "key" (но не такие как например "keyed", "monkey", "buckeye"). По сути эквивалентно .key.
+
[lang|=es]
+
Выбирает элементы определённые как Spanish. Это включает "es" и "es-MX" но не включает "eu-ES" (что является языком Basque).
+
[title*="example" i]
+
Выбирает элементы в состав которых входит "example", игнорируя регистр. В браузерах, которые не поддерживают флаг "i", этот селектор возможно не найдет ни один элемент.
+
a[href^="https://"]
+
Выбирает все защищённые ссылки.
+
img[src$=".png"]
+
Косвенно выбирает изображения PNG; любые изображения которые являются изображениями PNG но, чей адрес URL не заканчивается на ".png" (такие как в строке запроса) не будут выбраны.
+
+ +

Селекторы псевдокласса

+ +

Псевдокласс класса CSS - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента. Например {{Cssxref (": hover")}} применит стиль, когда пользователь наводит на элемент, указанный селектором.

+ +

Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора ({{ cssxref(":visited") }}, для примера), статус его содержимого (наподобии {{ cssxref(":checked") }} на некоторых элементах формы) или положение мыши (наподобии {{ cssxref(":hover") }} который позволяет узнать, находится ли мышь над элементом или нет). Чтобы просмотреть полный список селекторов, посетите CSS3 Спецификация работы селекторов.

+ +
+
Синтаксис
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Список псевдоклассов

+ + + +

Информация: Специфичность

+ +

Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу. Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе. Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более конкретный селектор. Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.

+ +
+
Подробнее
+ +

Вы также можете комбинировать селектор, создавая более конкретный селектор. Например, селектор .key выбирает все элементы, с ключом имени класса key. Селектор p.key отбирает только {{ HTMLElement("p") }} элементы, которые имеют имя класса key.

+
+ +

Если таблица стилей имеет противоречивые правила, и они одинаково специфичны, тогда CSS дает приоритет правилу, которое позже находится в таблице стилей.

+ +

Если у вас возникла проблема с конфликтующими правилами, попробуйте разрешить это, сделав одно из правил более конкретным, чтобы оно имело приоритет. Если вы не можете этого сделать, попробуйте переместить одно из правил ближе к концу таблицы стилей, чтобы оно имело приоритет.

+ +

Информация: Селекторы на основе отношений

+ +

CSS имеет несколько способов выбора элементов на основе отношений между элементами. Вы можете использовать их, чтобы сделать селектора более конкретными.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Общие селекторы, основанные на отношениях
СелекторВыбрано
A EЛюбой E элемент, что является потомком одного из A элемента (то есть: дочерний, или один из дочернего, т.д.)
A > EЛюбой E элемент, что явлется  дочерним (т.е. прямой потомок)  A элемента.
E:first-childЛюбой E элемент, что является первым дочерним элементом родительского элемента.
B + EЛюбой E элемент, что является следующим "братом" B элемента (то есть: следующий ребенок того же родителя)
+ +

Вы можете комбинировать их для выражения сложных отношений.

+ +

Вы можете так же использовать символ * (звездочка), что подразумевает "любой элемент".

+ +
+
Пример
+ +

Таблица HTML имеет аттрибут id , но строки и ячейки не имеют отдельных идентификаторов:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

Эти правила делают первую ячейку в каждой строке подчеркнутой, а "брат" первой ячейки каждой строки зачеркнутой (в примере 2-я ячейка) . Они влияют только на одну конкретную таблицу в документе::

+ +
#data-table-1 td:first-child {text-decoration: underline;}
+#data-table-1 td:first-child + td {text-decoration: line-through;}
+
+ +

Резульат  выглядит  наподобии:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Подробно
+ +

Обычным способом, если вы делаете селектор более конкретным, вы увеличиваете его приоритет.

+ +

Если вы используете эти методы, вы избегаете необходимость указывать в атрибутах class или id на множестве тегов в вашем документе. Вместо этого, CSS выполнит эту работу.

+ +

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

+ +

Дополнительные примеры о таблицах, смотрите Tables на странице ссылок CSS.

+
+ +

Действие: Использование селекторов class и ID

+ +
    +
  1. Измените свой HTML-файл и продублируйте абзац, скопировав его и вставив в него.
    2. +
  2. Затем добавьте аттрибуты id и class  в первую копию, а аттрибут id во вторую копию, как показано ниже. Кроме того, скопируйте и вставьте весь файл снова: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Теперь отредактируйте свой файл CSS. Замените все содержимое на: + 
    strong { color: red; }
+.carrot { color: orange; }
+.spinach { color: green; }
+#first { font-style: italic; }
+
    +
    4. +
  4. Сохраните файлы и обновите свой браузер, чтобы увидеть результат: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

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

    + +

    Селекторы классов .carrot и .spinach имеют приоритет над селектором тега strong.

    + +

    Селектор ID #first имеет приоритет над селекторами класс и тег.

    +
    5. +
+ +
+
Вызовы
+ +
    +
  1. Не изменяя свой HTML-файл, добавьте в свой CSS-файл одно правило, которое сохраняет все начальные буквы того же цвета, что и сейчас, но делает весь текст во втором абзаце синим: + + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Теперь измените правило, которое вы только что добавили (не изменяя ничего другого), чтобы сделать первый абзац синим: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Possible solution
+ +
    +
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: + + 
    #second { color: blue; }
+
    + A more specific selector, p#second also works.
    2. +
  2. Change the selector of the new rule to be a tag selector using p: + 
    p { color: blue; }
+
    +
    3. +
+Hide solution
+See a solution for the challenge.
+ +

Действие: Использование селекторов псевдокласса

+ +
    +
  1. Создайте HTML-файл со следующим содержимым: + + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Теперь отредактируйте свой файл CSS. Замените все содержимое на: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Сохраните файлы и обновите свой браузер, чтобы увидеть результат (наведите указатель мыши на следующую ссылку, чтобы увидеть эффект): + + + + + + +
    Перейдите к нашей Домашняя страница 
    +
    4. +
+ +

Действие: Использование селекторов на основе отношений и псевдоклассов

+ +

С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы. Это обычная техника, используемая, например, для создания чисто-CSS выпадающее меню ( это только CSS, без использования JavaScript). Суть этого метода заключается в создании правила следующего вида:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

для применения к структуре HTML, наподобии следующей:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Смотрите наш полный Пример CSS-основанного выпадающего меню для возможной реплики.

+ +

Что дальше?

+ +

Ваша таблица стилей начинает выглядеть плотной и сложной. Следующая секция описывает пути CSS легкого чтения. {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

-- cgit v1.2.3-54-g00ecf