Эффект, которого мы хотим добиться, заключается в добавлении небольшого значка ко всем ссылкам, ведущим на не этот сайт, чтобы сообщить пользователям, что нажатие на эту ссылку приведет вас с этого сайта. Это внешняя ссылка. Конечно, этого можно добиться с помощью более сложного JavaScript, но теперь мы можем добиться этой функции с помощью селекторов атрибутов CSS 3.
а[href^="http:"] {
фон:url(images/externalLink.gif) без повтора справа вверху;
отступ справа: 10 пикселей;
}
Смысл приведенного выше кода таков: все ссылки, начинающиеся с http:, будут добавлены с небольшим значком стрелки, чтобы напомнить пользователю, что это внешняя ссылка, и при нажатии на нее пользователь покинет сайт. Можно сказать, что эта функция очень удобна для пользователя и подчеркивает простоту использования веб-дизайна.
Конечно, это потому, что все ссылки, ведущие на этот сайт, используют относительные адреса. Что, если ссылка на этот сайт также начинается с http: или использует как абсолютный, так и относительный адрес? Мы можем использовать следующий код:
a[href^="http:"] {
фон:url(images/externalLink.gif) без повтора справа вверху;
отступ справа: 10 пикселей;
}
а [href*="www.dudo.org"] {
фон: нет;
дополнение: 0;
}
Два приведенных выше правила таковы: все адреса, начинающиеся с http:, добавляются со значком внешней ссылки, а адреса, начинающиеся с http://www.dudo.org/, не используются. Естественные относительные адреса не начинаются с http. значок стрелки не появится.
Источник статьи: http://www.dudo.org/article/CSSJS/use_new_tech_of_CSS.htm