Перейти к предыдущему разделу:
Cascading & inheritanceЭто пятый раздел руководства CSS для начинающих. В нем объясняется, как можно выборочно применять стили и каким образом различные типы селекторов имеют разные приоритеты.
Некоторые атрибуты добавляются к тегам в шаблоне документа, и эти атрибуты используются в шаблоне таблицы стилей.
Информация: Селекторы
Ранее мы уже встречались с селекторами. Мы создали строку в файле стилей следующего вида:
strong {
color: red;
}
В терминологии CSS эта строка полностью является правилом CSS. Это правило начинается со strong
, что и называется селектором CSS. Селектор выбирает, к каким элементам DOM применяется правило.
Часть внутри фигурных скобок называется объявлением.
Ключевое слово color
- свойство, а red
- значение.
Точка с запятой после пары "свойство-значение" отделяет её от других пар "свойство-значение" в том же объявлении.
Этот учебник ссылается на селектор типа strong
как на селектор тега. Спецификация CSS ссылается на него как на селектор типа.
На этой странице учебника объясняются дополнительные сведения о селекторах, которые можно использовать в правилах CSS.
В дополнение к именам тегов, вы можете использовать в селекторах значения атрибутов. Это позволит вашим правилам быть более избирательными.
Селекторы классов
Используйте атрибут class
в элементе, чтобы назначить элемент именованному классу. Выбор имени класса целиком за вами. Множество элементов в документе может иметь одно и то же значение класса.
В вашей таблице стилей используйте точку перед именем класса для использования его в качестве селектора.
Селекторы ID
Используйте атрибут id в элементе, чтобы назначить идентификатор элементу. Это зависит от вас, какое имя вы выберете для ID. Идентификационное имя должно быть уникальным в документе.
В таблице стилей введите знак решетки перед идентификатором, когда вы используете его в селекторе.
class
и id
:
<p class="key" id="principal">
Значение идентификатора id, principal
, должно быть уникально в документе, но разные тэги в документе, могут иметь одинаковое имя class со значением key
.
Это правило делает все классы(class) со значениемkey
зелёными. (Они даже не должны быть все элементами <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 - это ключевое слово, добавленное в селектор, который задает особое состояние выбранного элемента. Например : hover
применит стиль, когда пользователь наводит на элемент, указанный селектором.
Псевдо-классы вместе с псевдоэлементами позволяют применять стиль к элементу не только по отношению к содержанию дерева документов, но и по отношению к внешним факторам, таким как история навигатора (:visited
, для примера), статус его содержимого (наподобии :checked
на некоторых элементах формы) или положение мыши (наподобии :hover
который позволяет узнать, находится ли мышь над элементом или нет). Чтобы просмотреть полный список селекторов, посетите CSS3 Спецификация работы селекторов.
selector:pseudo-class {
property: value;
}
Список псевдоклассов
Информация: Специфичность
Несколько правил могут иметь селектор, каждый из которых соответствует одному и тому же элементу. Если свойство задано только одним правилом, конфликт не возникает, и свойство устанавливается в элементе. Если к элементу применяется более одного правила и устанавливает одно и то же свойство, тогда CSS дает приоритет правилу, которое имеет более конкретный селектор. Селектор ID более специфичен, чем селектор класса, псевдокласса или атрибута, который, в свою очередь, более специфичен, чем селектор тегов или псевдоэлементов.
Вы также можете комбинировать селектор, создавая более конкретный селектор. Например, селектор .key
выбирает все элементы, с ключом имени класса key
. Селектор p.key
отбирает только <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.
Действие: Использование селекторов class и ID
- Измените свой HTML-файл и продублируйте абзац, скопировав его и вставив в него.
- Затем добавьте аттрибуты 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>
- Теперь отредактируйте свой файл CSS. Замените все содержимое на:
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
имеет приоритет над селекторами класс и тег.
- Не изменяя свой HTML-файл, добавьте в свой CSS-файл одно правило, которое сохраняет все начальные буквы того же цвета, что и сейчас, но делает весь текст во втором абзаце синим:
Cascading Style Sheets Cascading Style Sheets - Теперь измените правило, которое вы только что добавили (не изменяя ничего другого), чтобы сделать первый абзац синим:
Cascading Style Sheets Cascading Style Sheets
- Add a rule with an ID selector of
#second
and a declarationcolor: blue;
, as shown below:
A more specific selector,#second { color: blue; }
p#second
also works. - Change the selector of the new rule to be a tag selector using
p
:p { color: blue; }
Действие: Использование селекторов псевдокласса
- Создайте 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>
- Теперь отредактируйте свой файл 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; }
- Сохраните файлы и обновите свой браузер, чтобы увидеть результат (наведите указатель мыши на следующую ссылку, чтобы увидеть эффект):
Перейдите к нашей Домашняя страница
Действие: Использование селекторов на основе отношений и псевдоклассов
С помощью селекторов, основанных на связях и псевдоклассах, вы можете создавать сложные каскадные алгоритмы. Это обычная техника, используемая, например, для создания чисто-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 легкого чтения. Перейти к следующему разделу:
Readable CSS