Селекторы атрибутов используют атрибуты тега. В основном они используются в XML, но также применяются и в XHTML. Правило:
img [title] {border: 2px solid blue;}
указывает, что любой тег img с атрибутом title, например:
<img src="images/sunset.jpg" alt="Lahina Sunset" title="Lahina Sunset">
должен отображаться с синей рамкой и толщиной 2 пиксела вне зависимости от содержания атрибута title.
Атрибут title содержит текст, который отображается во всплывающей подсказке при наведении указателя мыши на изображение. Обычно текст title дублируется в атрибуте alt, содержащем описание изображения, отображаемое, если само изображение загрузить не удалось. Значение атрибута alt также озвучивается программами считывания информации с экрана.
Можно задать стили только для тегов с определенными значениями атрибутов. Например, правило:
img [alt="Stylin logo"] {border: 2px solid-blue;}
добавляет рамку вокруг изображения, значением атрибута alt которого является текст "Stylin logo", иными словами, если в коде есть запись вроде следующей:
<img src="images/stylin_logo" alt="Stylin logo">
Это правило становится еще более полезным, если знать, что в качестве значения атрибута можно указать только первые буквы текста. Но в этом случае прием сработает, если «общая» часть текста значения атрибута будет отделена от «отличающихся». Иными словами, при наличии кода:
<img src="images/car1.gif" alt="car-toyota-prius"> <img src="images/car2.gif" alt="car-handa-accord">
использовав символ | в правиле CSS:
img [alt | ="car"] {border: 2px solid blue;}
мы добавим к этим двум изображениям синюю рамку толщиной в 2 пиксела. Кстати, при этом рамка будет добавлена и к следующему изображению:
<img src="images/car_montage.gif" alt="car">
несмотря на то, что в данном примере значение тега alt не имеет дополнительного расширения.