Когда мы разрабатываем веб-сайт, иногда нам необходимо создать разные стили на основе атрибутов элементов страницы. Например, отображать разные значки ссылок для разных типов ссылок. CSS-селекторы — очень полезная технология, с помощью которой мы можем легко добиться определенных эффектов. Сегодня мы представим селектор атрибутов CSS, создав персонализированный стиль ссылки.
Давайте сначала посмотрим на демо-версию:
Как вы можете видеть на рисунке выше, мы определили разные стили для каждого типа ссылки: когда значением атрибута href ссылки a является ссылка электронной почты «mailto», после ссылки отображается значок почты; это файл Word, сзади отображается значок документа Word; если адрес ссылки — mp3, отображается значок музыкального проигрывателя; когда адрес ссылки содержит «qianduan.net», отображается значок домашней страницы...
Фактически, реализовать такую функцию очень легко. Давайте сначала посмотрим на синтаксис селекторов атрибутов CSS:
Следует отметить, что селектор CSS, независимо от версии CSS 2.1 или версии CSS 3, поддерживается IE7 и IE8, а также веб-китом, ядром Gecko и Opera. Только браузеры ниже IE6 не поддерживают его.
Хорошо, давайте реализуем эти стили:
1. Базовый стиль ссылок. Сначала мы подготовили изображение CSS-спрайтов и интегрировали все значки в этот GIF-файл.
| а { фон:url(a.gif) без повтора, вправо 4 пикселя; отступ справа: 18 пикселей; цвет: #369; высота строки: 24 пикселей; } |
Таким образом, мы определили стиль по умолчанию для всех ссылок, и справа от всех ссылок будет отображаться небольшой значок красной стрелки.
2. Определите персонализированные стили. Теперь давайте определим соответствующие стили для различных типов ссылок. Фактически, все, что нам нужно сделать на этом этапе, — это определить различные позиции фонового изображения (background-position):
mailtomailtoПочтовая ссылка имеет форму href=. «mailto:[email protected]», значение атрибута href начинается с mailto, затем мы используем формат [att^=val]:
| а[href^="mailto:"] { фоновая позиция: справа -242 пикселей; } |
| а[href$=".doc"] { позиция фона: справа - 160 пикселей } |
Документы в форматах PDF, Excel, mp3 и других также реализуются с помощью этого метода.
Ссылки, содержащие поле qianduan.net. Для ссылок, содержащих определенную строку, вы можете использовать [att*=val]:
| а { фон:url(a.gif) без повтора, вправо 4 пикселя; отступ справа: 18 пикселей; цвет: # 369; высота строки: 24 пикселей; } a[href^="mailto:"] {background-position:right -242px;} a[href$=".doc"] {background-position:right -161px} a[href$=".xls"] {background-position:right -282px} a[href$=".pdf"] {background-position:right -79px} a[href$=".mp3"] {background-position:right -204px} a[href$=".swf"] {background-position:right -120px} a[href$=".rar"] {background-position:right -38px} a[href*="qianduan.net"] {background-position:right -328px} |
И когда мы его используем, нам не нужно добавлять дополнительные классы:
| <a href="abc.doc">Документ Word</ а > |