При разработке веб -сайта нам иногда нужно создавать разные стили на основе атрибутов элементов страницы, например, для разных типов ссылок отображаются различные значки ссылок. Селекторы CSS - очень полезная техника, через них мы можем легко достичь определенных эффектов. Сегодня мы представим селектор недвижимости CSS, создав персональный стиль ссылки.
Давайте сначала посмотрим на демонстрацию:
Как видно на приведенном выше рисунке, мы определяем другой стиль для каждой ссылки: когда значение атрибута Href ссылки A является «почтовым» ссылкой «Mailto», за ссылкой отображается значок электронной почты; Когда используется слово, значок документа Word отображается за ним;
На самом деле, очень легко реализовать такую функцию.
Следует отметить, что IE7 и IE8 поддерживают селектор CSS независимо от версии CSS 2.1 или CSS 3, а Webkit, Gecko Core и Opera также поддерживают его.
Хорошо, давайте внедрим эти стили:
1. Основной стиль ссылки Сначала мы подготовим изображение спрайтов CSS и интегрируем все значки в этот A.GIF.
| a { Предпосылки: URL (A.GIF) без повторного правого правого 4PX; Право накладчика: 18px; Цвет:#369; высота линии: 24px; } |
Таким образом, мы определяем стиль по умолчанию для всех ссылок, и на правой стороне всех ссылок будет отображаться небольшая красная стрелка.
2. Определите персонализированные стили.
Mailtomailto Mail ссылки находятся в стиле href = "mailto: [email protected]".
| a [href^= "mailto:"] {{ Фон -сокость: справа -242px; } |
Мы обычно считаем, что все ссылки на файлы DOC находятся в формате href = "abc.doc", что означает, что адрес ссылки заканчивается .doc, поэтому нам нужно использовать формат [att $ = val]. Стиль следующим образом:
| a [href $ = ". Doc"] { Справочная позиция: справа -160px } |
Документы в PDF, эксплуатацию, форматы MP3 также реализованы таким образом.
Ссылки, содержащие поля Qianduan.net для ссылок, содержащих определенную строку, вы можете использовать [att*= val]:
| a { Предпосылки: URL (A.GIF) без повторного правого правого 4PX; Право накладки: 18px; цвет:#369; высота линии: 24px; } a [href^= "mailto:"] {background -position: справа -242px;} a [href $ = ". Doc"] {background -Position: справа -161px} a [href $ = ". XLS"] {Founal Position: справа -282px} a [href $ = ". Pdf"] {founal -Position: справа -79px} a [href $ = ". mp3"] {founal -Position: справа -204px} a [href $ = ". SWF"] {Founal Position: справа -120px} a [href $ = ". rar"] {background -position: справа -38px} a [href*= "qianduan.net"] {founal -Position: справа -328px} |
И когда мы его используем, нам не нужно добавлять дополнительный класс:
| <a href = "abc.doc"> документ Word </a> |