Quando projetamos um site, às vezes precisamos criar estilos diferentes com base nos atributos dos elementos da página. Por exemplo, exibir ícones de links diferentes para tipos de links diferentes. Os seletores CSS são uma tecnologia muito útil, através da qual podemos facilmente obter determinados efeitos. Hoje apresentaremos o seletor de atributos CSS criando um estilo de link personalizado.
Vamos dar uma olhada na demonstração primeiro:
Como você pode ver na imagem acima, definimos estilos diferentes para cada tipo de link: quando o valor do atributo href do link a é o link de email "mailto", um ícone de email é exibido atrás do link; é um arquivo word, o ícone do documento word é exibido na parte traseira; quando o endereço do link é mp3, o ícone do reprodutor de música é exibido quando o endereço do link contém "qianduan.net", um ícone da página inicial é exibido...
Na verdade, é muito fácil implementar tal função. Vamos primeiro dar uma olhada na sintaxe dos seletores de atributos CSS:
Deve-se observar que o seletor CSS, independente da versão CSS 2.1 ou versão CSS 3, é suportado pelo IE7 e IE8, assim como webkit, Gecko core e Opera Only, navegadores abaixo do IE6 não o suportam.
Ok, vamos implementar estes estilos:
1. Estilo básico de links Primeiro, preparamos uma imagem CSS Sprites e integramos todos os ícones neste a.gif.
| um { background:url(a.gif) sem repetição à direita 4px; preenchimento à direita: 18px; cor:#369; altura da linha: 24px; } |
Desta forma, definimos o estilo padrão para todos os links, e um pequeno ícone de seta vermelha será exibido no lado direito de todos os links.
2. Definir estilos personalizados Agora vamos definir os respectivos estilos para vários tipos de links. Na verdade, tudo o que precisamos fazer neste momento é definir diferentes posições de imagem de fundo (background-position):
mailtomailtoO link de email tem o formato de href=. No estilo " mailto:[email protected]", o valor do atributo href começa com mailto, então usamos o formato [att^=val]:
| a[href^="mailto:"] { posição de fundo: direita -242px; } |
| uma[href$=".doc"] { posição de fundo: direita -160px } |
Documentos em PDF, excel, mp3 e outros formatos também são implementados através deste método.
Links contendo o campo qianduan.net Para links contendo uma determinada string, você pode usar [att*=val]:
| um { background:url(a.gif) sem repetição à direita 4px; padding-right:18px;cor:#369;altura da linha:24px; } a[href^="mailto:"] {posição de fundo:direita -242px;} a[href$=".doc"] {posição de fundo:direita -161px} a[href$=".xls"] {posição de fundo:direita -282px} a[href$=".pdf"] {posição de fundo:direita -79px} a[href$=".mp3"] {posição de fundo:direita -204px} a[href$=".swf"] {posição de fundo:direita -120px} a[href$=".rar"] {posição de fundo:direita -38px} a[href*="qianduan.net"] {background-position:right -328px} |
E quando o usamos, não precisamos adicionar classes adicionais:
| <a href="abc.doc">documento Word</ uma > |