A veces es posible que queramos que los enlaces internos muestren estilos diferentes a los de los enlaces externos, como los enlaces externos. Quiero agregar un pequeño ícono al lado del enlace para indicar que es un enlace externo, para informar a los visitantes y permitirles confirmar si abrir en una ventana nueva o en esta ventana. Podríamos hacer esto:
| El siguiente es el contenido citado: .externo { fondo:url(images/external.gif) no repetir arriba a la derecha; relleno-derecha: 12px; } |
Luego aplique el CSS a cada enlace externo. Por supuesto, esto no es imposible, pero es demasiado engorroso.
Entonces, ¿existe una buena manera de lograrlo? tener. Puede utilizar la selección de atributos en CSS3, pero este método no es compatible con IE6 y versiones inferiores. Se ha implementado en FireFox.
La sintaxis básica del selector de atributos es: [att^=val]
Por ejemplo:
| El siguiente es el contenido citado: un[href^="http://www.admin5.com"] { imagen de fondo: ninguna; relleno-derecha: 0px; } |
Se encontrarán todos los enlaces que comiencen con http://www.cz268.com.cn y se excluirán las imágenes de fondo. Con los atributos anteriores, será más fácil de manejar.
| El siguiente es el contenido citado: <tipo de estilo="texto/css"> a { fondo:url(external.gif) no repetir arriba derecha; relleno-derecha: 14px; tamaño de fuente: 12px; } a[href^="http://www.cz268.com.cn"] { imagen de fondo: ninguna; relleno-derecha: 0px; } </estilo> |
Primero agregue íconos a todos los enlaces y luego elimine los íconos de enlaces que comienzan con http://www.cz268.com.cn. Esto permitirá que los enlaces externos muestren íconos y los enlaces internos no muestren íconos.
Nota: Esto se aplica a Firefox, pero no a IE.
| El siguiente es el contenido citado: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |