Ao projetar um site, às vezes precisamos criar estilos diferentes com base nos atributos dos elementos da página, por exemplo, para diferentes tipos de link, diferentes ícones de link são exibidos. Os seletores CSS são uma técnica muito útil, através deles, podemos facilmente alcançar certos efeitos. Hoje, apresentaremos o seletor de propriedades do CSS, criando um estilo de link personalizado.
Vamos dar uma olhada na demonstração primeiro:
Como pode ser visto na figura acima, definimos um estilo diferente para cada link: quando o valor do atributo href do link A é "Mailto" Link, um ícone do email é exibido atrás do link; Quando o arquivo do Word é usado, o ícone do documento do Word é exibido por trás dele;
De fato, é muito fácil implementar essa função.
Deve -se notar que o seletor CSS de suporte IE7 e IE8, independentemente da versão CSS 2.1 ou CSS 3, e o WebKit, Gecko Core e Opera também suportam.
Ok, vamos implementar esses estilos:
1. Estilo básico de link Primeiro, preparamos uma imagem CSS Sprites e integramos todos os ícones a este AF.
| A { Antecedentes: URL (A.GIF) sem repetição à direita 4px; Right-right: 18px; Cor:#369; altura da linha: 24px; } |
Dessa forma, definimos o estilo padrão para todos os links, e um pequeno ícone de seta vermelha será exibida no lado direito de todos os links.
2. Definir estilos personalizados.
Os links de correio de correio estão no estilo de href = "Mailto: [email protected]".
| a [href^= "Mailto:"] {{ Antecedentes -Posidade: direita -242px; } |
Geralmente, acreditamos que todos os links de arquivo do DOC estão no formato de href = "abc.doc", o que significa que o endereço do link termina com .doc, por isso precisamos usar o formato de [att $ = val]. O estilo é o seguinte:
| a [href $ = ". doc"] { Posição de fundo: direita -160px } |
Os documentos nos formatos PDF, Excle, MP3 também são implementados dessa maneira.
Links que contêm campos Qianduan.net para links contendo uma certa string, você pode usar [att*= val]:
| A { Antecedentes: URL (A.GIF) sem repetição à direita 4px; Right-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"] {posição de fundo: direita -328px} |
E quando o usamos, não precisamos adicionar uma aula extra:
| <a href = "abc.doc"> documento do word </a> |