Подробное описание селекторов атрибута CSS

CSS 2 ввел селекторы свойств.

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

Простые селекторы свойств

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

Пример 1

Если вы хотите сделать все элементы, содержащие заголовок (title), красными, можно написать:

*[title] {color:red;}

Попробуйте сами

Пример 2

Аналогично, можно применить стили только к锚ам (элементам a) с атрибутом href:

a[href] {color:red;}

Попробуйте сами

Пример 3

Можно выбирать по нескольким свойствам, просто свяжите селекторы свойств вместе.

Например, чтобы сделать текст гиперссылок HTML, у которых есть как href, так и title, красным, можно написать так:

a[href][title] {color:red;}

Попробуйте сами

Пример 4

Можно использовать некоторые творческие методы для использования этой функции.

Например, можно применить стиль ко всем изображениям с атрибутом alt, чтобы выделить эти эффективные изображения:

img[alt] {border: 5px solid red;}

Попробуйте сами

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

Пример 5: Использование свойственных выборщиков для XML-документа

Свойственные выборщики полезны в XML-документах, так как языку XML свойственно указывать имена элементов и атрибутов в зависимости от их用途.

Предположим, что мы создали XML-документ для описания планет Солнечной системы. Если мы хотим выбрать все элементы planet с атрибутом moons и сделать их текст красным, чтобы привлечь внимание к планетам с moons, можно написать так:

planet[moons] {color:red;}

Это сделает текст второго и третьего элементов в следующем фрагменте маркера красным, но текст первого элемента не будет красным:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Просмотрите результат

Выбор по конкретному значению свойства

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

Пример 1

Например, предположим, что вы хотите сделать гиперссылку на определенный документ на веб-сервере красной, можно написать так:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Попробуйте сами

Пример 2

Как и в случае с простыми свойствами выбора, можно объединять несколько свойств-значений для выбора документа.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

Это изменит текст первого гиперссылки в следующем маркере на красный, но второй или третий ссылки не受到影响:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Попробуйте сами

Пример 3

Таким же образом, язык XML также может использовать этот метод для установки стилей.

Теперь вернемся к примеру с планетами. Предположим, что мы хотим выбрать элементы planet с значением атрибута moons равным 1:

planet[moons="1"] {color: red;}

Следующий код сделает красным второй элемент из следующих маркеров, но первый и третий элементы не受到影响:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

Просмотрите результат

Атрибут и значение атрибута должны полностью совпадать

Обратите внимание, что этот формат требует полного совпадения с значением атрибута.

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

Рассмотрим фрагмент маркера:

<p class="important warning">Этот абзац является очень важным предупреждением.</p>

Если написать p[class="important"], то это правило не будет соответствовать примерному маркеру.

Чтобы выбрать элемент по конкретному значению атрибута, необходимо написать так:

p[class="important warning"] {color: red;}

Попробуйте сами

Выбор по части значения атрибута

Если нужно выбирать по слову из списка слов в значении атрибута,则需要 использовать знак波浪ия (~).

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

p[class~="important"] {color: red;}

Попробуйте сами

Если пропущен знак波浪ия, это означает, что необходимо выполнить полное совпадение значения.

Разница между частью атрибута выбора и точкой классом

Этот селектор эквивалентен тому, о чем мы говорили в классе селектора с точкой.

То есть, p.important и p[class="important"] эквивалентны при применении к документу HTML.

Так почему же нужен атрибут выбора "~="? Потому что он может использоваться для любого атрибута, а не только для класса.

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

img[title~="Figure"] {border: 1px solid gray;}

Этот правил会选择 title текст содержит "Figure" всех изображений. Изображения без атрибута title или title атрибут не содержит "Figure" не будут соответствовать.

Попробуйте сами

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

Теперь я хочу представить вам более сложный модуль селекторов, который был выпущен после завершения CSS2, и который включает в себя больше частей селекторов с частью значения. По спецификации, их следует называть «селекторами подстроки свойств».

Многие современные браузеры поддерживают эти селекторы, включая IE7.

Ниже приведен краткий обзор этих селекторов:

Тип Описание
[abc^="def"] Выбрать все элементы, значения атрибута abc начинаются на "def".
[abc$="def"] Выбрать все элементы, значения атрибута abc заканчиваются на "def".
[abc*="def"] Выбрать все элементы, значения атрибута abc содержат подстроку "def".

Можно подумать, что у этих селекторов много применений.

Например, если вы хотите применить стиль ко всем ссылкам, ведущим на CodeW3C.com, не нужно指定 класс для всех этих ссылок и затем писать стиль для этого класса, просто нужно написать следующее правило:

a[href*="codew3c.com"] {color: red;}

Попробуйте сами

Совет:Любой атрибут можно использовать с этими селекторами.

Тип специфического селектора свойств

Теперь я хочу представить вам специфический селектор свойств. Посмотрите на следующий пример:

*[lang|="en"] {color: red;}

Этот правил会选择 lang свойство равное en или начинающееся с en- всех элементов. Таким образом, первые три элемента в следующем примере будут выбраны, а не последние два элемента:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Попробуйте сами

В общем, [att|="val"] можно использовать для любого свойства и его значения.

Предположим, что в HTML-документе есть一系列 изображений, и каждый файл изображения имеет имя, например: figure-1.jpg и figure-2.jpgС помощью следующих селекторов можно соответствовать всем этим изображениям:

img[src|="figure"] {border: 1px solid gray;}

Попробуйте сами

Конечно, наиболее распространенное использование этого селектора свойств - это соответствие значению языка.

Референсная книга селекторов CSS

Селектор Описание
[attribute] Используется для выбора элементов с указанным атрибутом.
[attribute=value] Используется для выбора элементов с указанным атрибутом и значением.
[attribute~=value] Используется для выбора элементов с атрибутом, значение которого содержит указанное слово.
[attribute|=value] Используется для выбора элементов с атрибутом, значение которого начинается с указанного значения, и это значение должно быть целым словом.
[attribute^=value] Соответствуют каждому элементу, значение атрибута которого начинается с указанного значения.
[attribute$=value] Соответствуют каждому элементу, значение атрибута которого заканчивается на указанное значение.
[attribute*=value] Соответствуют каждому элементу, значение атрибута которого содержит указанное значение.