{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}
Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
|---|---|
| Задача: | Узнать, что такое селекторы атрибута и как их использовать. |
Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.
| Селектор | Пример | Описание |
|---|---|---|
[attr] |
a[title] |
Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках). |
[attr=value] |
a[href="https://example.com"] |
Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек. |
[attr~=value] |
p[class~="special"] |
Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений. |
[attr|=value] |
div[lang|="zh"] |
Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис. |
В приведённом ниже примере вы можете увидеть использование этих селекторов.
li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.li[class="a"] выбирает селектор с классом a, но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.li[class~="a"] выберет класс a, а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}
Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).
| Селектор | Пример | Описание |
|---|---|---|
[attr^=value] |
li[class^="box-"] |
Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value. |
[attr$=value] |
li[class$="-box"] |
Выбирает элементы с атрибутом attr, значение которого заканчивается на value. |
[attr*= ] |
li[class*="box"] |
Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки. |
(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)
Следующий пример показывает, как используются эти селекторы:
li[class^="a"] выбирает все значения атрибута, которые начинаются с a, что соответствует первым двум элементам списка.li[class$="a"] выбирает все значения атрибута, которые заканчиваются на a, что соответствует первому и третьему элементу списка.li[class*="a"] выбирает все значения атрибута, где появляется a, независимо от положения в строке, что соответствует всем элементам нашего списка.{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}
Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.
В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.
{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
Примечание: Существует также более новое значение s, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.
Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.
{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}