Al diseñar un sitio web, a veces necesitamos crear diferentes estilos basados en los atributos de los elementos de página, por ejemplo, para diferentes tipos de enlaces, se muestran diferentes iconos de enlaces. Los selectores CSS son una técnica muy útil, a través de ellos, podemos lograr fácilmente ciertos efectos. Hoy presentaremos el selector de propiedades de CSS creando un estilo de enlace personalizado.
Echemos un vistazo a la demostración primero:
Como se puede ver en la figura anterior, definimos un estilo diferente para cada enlace: cuando el valor del atributo HREF del enlace A es el enlace de correo "Mailto", se muestra un icono del correo electrónico detrás del enlace; Cuando se usa el archivo Word, el icono de documento de Word se muestra detrás de él;
De hecho, es muy fácil implementar dicha función.
Cabe señalar que IE7 e IE8 admiten Selector CSS, independientemente de la versión CSS 2.1 o CSS 3, y WebKit, Gecko Core y Opera también lo admiten.
Ok, implementemos estos estilos:
1. Estilo básico de enlace Primero preparamos una imagen de Sprites CSS, e integramos todos los iconos en este A.GIF.
| a { Antecedentes: URL (a.gif) sin repetición derecha 4px; Right-Right: 18px; Color:#369; Línea-aguja: 24px; } |
De esta manera, definimos el estilo predeterminado para todos los enlaces, y se mostrará un pequeño icono de flecha roja en el lado derecho de todos los enlaces.
2. Defina estilos personalizados.
Los enlaces de correo de MailTomailto están en el estilo de href = "mailto: [email protected]".
| a [href^= "mailto:"] {{ Antecedentes -posidad: derecho -242px; } |
En general, creemos que todos los enlaces de archivo DOC están en formato de href = "abc.doc", lo que significa que la dirección de enlace termina con .doc, por lo que debemos usar el formato de [ATT $ = val]. El estilo es el siguiente:
| a [href $ = ". doc"] { Posición de fondo: derecha -160px } |
Los documentos en los formatos PDF, Excle, MP3 también se implementan de esta manera.
Enlaces que contienen campos Qianduan.net para enlaces que contienen una determinada cadena, puede usar [ATT*= Val]:
| a { Antecedentes: URL (a.gif) sin repetición derecha 4px; Right-Right: 18px; color:#369; Línea de altura: 24px; } A [href^= "mailto:"] {Posición de fondo: derecha -242px;} A [href $ = ". doc"] {Posición de fondo: derecha -161px} A [href $ = ". Xls"] {Posición de fondo: derecha -282px} A [href $ = ". PDF"] {Posición de fondo: derecha -79px} A [href $ = ". mp3"] {Posición de fondo: derecha -204px} A [href $ = ". Swf"] {Posición de fondo: derecha -120px} A [href $ = ". rar"] {Posición de fondo: derecha -38px} A [href*= "qianduan.net"] {fondo de fondo: derecho -328px} |
Y cuando lo usamos, no necesitamos agregar una clase adicional:
| <a href = "abc.doc"> documento de Word </a> |