{{ 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. Идентификационное имя должно быть уникальным в документе.
В таблице стилей введите знак решётки перед идентификатором, когда вы используете его в селекторе.
- -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][type='button'][class~=key].key.[lang|=es]a[href^="https://"]img[src$=".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;}
-
-
-Результат выглядит наподобие:
- -
-
|
-
Обычным способом, если вы делаете селектор более конкретным, вы увеличиваете его приоритет.
- -Если вы используете эти методы, вы избегаете необходимость указывать в атрибутах class или id на множестве тегов в вашем документе. Вместо этого, CSS выполнит эту работу.
В больших конструкциях, где скорость важна, вы можете сделать свои таблицы стилей более эффективными, избегая сложных правил, которые зависят от отношений между элементами.
- -Дополнительные примеры о таблицах, смотрите Tables на странице ссылок CSS.
-<!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> --
strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
- | Cascading Style Sheets | -
| Cascading Style Sheets | -
Вы можете попробовать перестроить строки в вашем файле CSS, чтобы показать, что порядок не имеет никакого эффекта.
- -Селекторы классов .carrot и .spinach имеют приоритет над селектором тега strong.
Селектор ID #first имеет приоритет над селекторами класс и тег.
| Cascading Style Sheets | -
| Cascading Style Sheets | -
| Cascading Style Sheets | -
| Cascading Style Sheets | -
#second and a declaration color: blue;, as shown below:
-
- #second { color: blue; }
-
- A more specific selector, p#second also works.p:
- p { color: blue; }
-
- <!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> --
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;
-}
-
- | Перейдите к нашей Домашняя страница | -
С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы. Это обычная техника, используемая, например, для создания чисто-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