Cuando diseñamos un sitio web, a veces necesitamos crear diferentes estilos según los atributos de los elementos de la página. Por ejemplo, mostrar diferentes íconos de enlace para diferentes tipos de enlaces. Los selectores CSS son una tecnología muy útil, mediante la cual podemos lograr fácilmente ciertos efectos. Hoy presentaremos el selector de atributos CSS creando un estilo de enlace personalizado.
Primero echemos un vistazo a la demostración:
Como puede ver en la imagen de arriba, hemos definido diferentes estilos para cada tipo de enlace: cuando el valor del atributo href del enlace a es el enlace de correo electrónico "mailto", se muestra un icono de correo detrás del enlace; es un archivo de Word, el icono del documento de Word se muestra en la parte posterior cuando la dirección del enlace es mp3, se muestra el icono del reproductor de música cuando la dirección del enlace contiene "qianduan.net", se muestra un icono de página de inicio
... es muy fácil implementar dicha función. Primero echemos un vistazo a la sintaxis de los selectores de atributos CSS:
Cabe señalar que el selector de CSS, independientemente de la versión de CSS 2.1 o CSS 3, es compatible con IE7 e IE8, así como con webkit, Gecko core y Opera. Solo los navegadores inferiores a IE6 no lo admiten.
Bien, implementemos estos estilos:
1. Estilo básico de enlaces Primero, preparamos una imagen de CSS Sprites e integramos todos los íconos en este a.gif.
| a { fondo:url(a.gif) sin repetición a la derecha 4px; relleno-derecha: 18px; color:#369; altura de línea: 24px; } |
De esta manera, hemos definido 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. Definir estilos personalizados Ahora definamos los estilos respectivos para varios tipos de enlaces. De hecho, todo lo que necesitamos hacer en este momento es definir diferentes posiciones de la imagen de fondo (posición de fondo):
mailtomailto El enlace del correo tiene la forma href=. Estilo "mailto:[email protected]", el valor de su atributo href comienza con mailto, luego usamos el formato [att^=val]:
| a[href^="correo a:"] { posición de fondo: derecha -242px; } |
| a[href$=".doc"] { posición de fondo: derecha -160px } |
A través de este método también se implementan documentos en PDF, excel, mp3 y otros formatos.
Enlaces que contienen el campo qianduan.net Para enlaces que contienen una determinada cadena, puede utilizar [att*=val]:
| a { fondo:url(a.gif) sin repetición a la derecha 4px; padding-right:18px;color:#369;line-height:24px; } a[href^="mailto:"] {posición-fondo:derecha -242px;} a[href$=".doc"] {posición-fondo:derecha -161px} a[href$=".xls"] {posición-fondo:derecha -282px} a[href$=".pdf"] {posición-fondo:derecha -79px} a[href$=".mp3"] {posición-fondo:derecha -204px} a[href$=".swf"] {posición-fondo:derecha -120px} a[href$=".rar"] {posición-fondo:derecha -38px} a[href*="qianduan.net"] {background-position:right -328px} |
Y cuando lo usamos, no necesitamos agregar clases adicionales:
| <a href="abc.doc">documento de Word</ un > |