Às vezes, podemos querer que os links internos exibam estilos diferentes dos links externos, como links externos. Quero adicionar um pequeno ícone ao lado do link para indicar que se trata de um link externo, para avisar os visitantes e deixá-los confirmar se devem abrir em uma nova janela ou nesta janela. Poderíamos fazer isso:
| A seguir está o conteúdo citado: .externo { background:url(images/external.gif) sem repetição no canto superior direito; preenchimento à direita: 12px; } |
Em seguida, aplique o CSS a cada link externo. Claro, isso não é impossível, mas é muito complicado.
Então, existe uma boa maneira de conseguir isso? ter. Você pode usar a seleção de atributos em CSS3, mas este método não é suportado no IE6 e abaixo. Ele foi implementado no FireFox.
A sintaxe básica do seletor de atributos é: [att^=val]
Por exemplo:
| A seguir está o conteúdo citado: uma[href^="http://www.admin5.com"] { imagem de fundo: nenhuma; preenchimento à direita: 0px; } |
Todos os links que começam com http://www.cz268.com.cn serão encontrados e as imagens de fundo serão excluídas. Com os atributos acima, será mais fácil lidar
| A seguir está o conteúdo citado: <style type="texto/css"> um { background:url(external.gif) sem repetição no canto superior direito; preenchimento à direita: 14px; tamanho da fonte: 12px; } uma[href^="http://www.cz268.com.cn"] { imagem de fundo: nenhuma; preenchimento à direita: 0px; } </estilo> |
Primeiro adicione ícones a todos os links e, em seguida, remova os ícones de links que começam com http://www.cz268.com.cn. Isso permitirá que links externos exibam ícones e links internos não exibam ícones.
Nota: Isso se aplica ao Firefox, mas não ao IE.
| A seguir está o conteúdo citado: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |