Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
7.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста.
[атрибут^="значение"] { Описание правил стиля } E[атрибут^="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определенным селекторам. Использование кавычек не обязательно.
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы атрибутов</title> <style> a[href^="http://"] { font-weight: bold /* Жирное начертание */ } </style> </head> <body> <p><a href="link1.html">Обычная ссылка</a> | <a href="http://htmlbook.ru" target="_blank">Внешняя ссылка на сайт htmlbook.ru</a></p> </body> </html>
Результат примера показан ниже (рис. 1).
Рис. 1. Изменение стиля для внешних ссылок
В данном примере внешние ссылки выделяются жирным начертанием. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере.
Сайт