Page 165 - Сила CSS3 Освой новейший стандарт

Разные варианты стилизации полноразмерных фотографий и эскизов • 165

img.thumbnail {
float: left;
margin: 0 20px 10px 0;
}

Это избыточный код, но если перед вами стоит задача реализовать селекторы в IE 6 без
помощи сценариев, это ваш единственный вариант. Мы не будем прибегать к этому ме-
тоду в нашем примере, и не только потому, что у нас есть сценарий. Селекторы атрибутов
применяются здесь для создания необязательного декоративного эффекта, без которого
в IE 6 вполне можно обойтись. Тем не менее если вы используете селекторы атрибутов
в более важных целях — или просто хотите застраховаться от ошибок, — рассмотрите
возможность реализации данного подхода.

коротко о Селекторах атриБутов

Селекторы атрибутов входят в модуль Selectors (Селекторы), который вы найдете по адресу
http://www.w3.org/TR/css3-selectors. Существует семь селекторов атрибутов:
• [attr] выбирает элемент с атрибутом attr независимо от значения этого атрибута;
• [attr=val] выбирает элемент с атрибутом attr, значение которого в точности равно val;

• [attr~=val] выбирает элемент с атрибутом attr, значение которого представляет собой
список слов с разделительными пробелами, и одно из этих слов в точности равно val;
• [attr|=val] выбирает элемент с атрибутом attr, значение которого в точности равно val
или начинается с val, за которым сразу же следует дефис;
• [attr^=val] выбирает элемент с атрибутом attr, значение которого начинается с val;
• [attr$=val] выбирает элемент с атрибутом attr, значение которого заканчивается на val;
• [attr*=val] выбирает элемент с атрибутом attr, значение которого содержит val в любом
месте.
Первые четыре атрибута называются селекторами наличия и значений атрибутов и впер-
вые появились еще в составе CSS 2.1. Последние три атрибута — это селекторы атрибутов
с сопоставлением подстрок, и они являются частью CSS3.

В качестве значений селекторов атрибутов можно использовать идентификаторы и строки;
строки необходимо заключать в кавычки.
У селекторов атрибутов та же специфика, что и у селекторов классов и псевдоклассов.
Помимо значков рядом со ссылками и стилизации изображений в зависимости от типа,
селекторы атрибутов можно применять для решения следующих задач:
• стилизация различных полей ввода в зависимости от типа (например, с использованием
input[type=submit]; см. http://dev.opera.com/articles/view/styling-forms-with-attribute-
selectors);
• стилизация предложений на разных языках (например, с помощью [lang|=en]);

www.trk.kg