Иногда нам может потребоваться, чтобы внутренние ссылки отображались в разных стилях, чем внешние ссылки, например внешние ссылки. Я хочу добавить небольшой значок рядом со ссылкой, чтобы указать, что это внешняя ссылка, чтобы сообщить посетителям и позволить им подтвердить, открывать ли их в новом окне или в этом окне. Мы могли бы сделать это:
| Ниже приводится цитируемое содержание: .внешний { фон:url(images/external.gif) без повтора справа вверху; отступ справа: 12 пикселей; } |
Затем примените CSS к каждой внешней ссылке. Конечно, это возможно, но это слишком громоздко.
Так есть ли хороший способ добиться этого? иметь. Вы можете использовать выбор атрибутов в CSS3, но этот метод не поддерживается в IE6 и ниже. Он реализован в FireFox.
Основной синтаксис селектора атрибутов: [att^=val]
Например:
| Ниже приводится цитируемое содержание: а[href^="http://www.admin5.com"] { фоновое изображение: нет; отступ-право: 0 пикселей; } |
Будут найдены все ссылки, начинающиеся с http://www.cz268.com.cn, а фоновые изображения будут исключены. С вышеуказанными атрибутами будет легче справиться
| Ниже приводится цитируемое содержание: <style type="text/css"> а { фон:url(external.gif) без повтора справа вверху; отступ справа: 14 пикселей; размер шрифта: 12 пикселей; } а[href^="http://www.cz268.com.cn"] { фоновое изображение: нет; отступ-право: 0 пикселей; } </стиль> |
Сначала добавьте значки ко всем ссылкам, а затем удалите значки ссылок, начиная с http://www.cz268.com.cn. Это позволит внешним ссылкам отображать значки, а внутренним ссылкам не отображать значки.
Примечание. Это применимо к Firefox, но не к IE.
| Ниже приводится цитируемое содержание: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |