Parfois, nous pouvons souhaiter que les liens internes affichent des styles différents de ceux des liens externes, tels que les liens externes. Je souhaite ajouter une petite icône à côté du lien pour indiquer qu'il s'agit d'un lien externe, pour informer les visiteurs et leur permettre de confirmer s'ils doivent ouvrir dans une nouvelle fenêtre ou dans cette fenêtre. Nous pourrions faire ceci :
| Voici le contenu cité : .externe { background:url(images/external.gif) sans répétition en haut à droite ; remplissage à droite : 12 px ; } |
Appliquez ensuite le CSS à chaque lien externe. Bien sûr, ce n’est pas impossible, mais c’est tout simplement trop fastidieux.
Alors, existe-t-il un bon moyen d’y parvenir ? avoir. Vous pouvez utiliser la sélection d'attributs dans CSS3, mais cette méthode n'est pas prise en charge dans IE6 et versions antérieures. Elle a été implémentée dans FireFox.
La syntaxe de base du sélecteur d'attribut est : [att^=val]
Par exemple:
| Voici le contenu cité : une[href^="http://www.admin5.com"] { image d'arrière-plan : aucune ; padding-right:0px; } |
Tous les liens commençant par http://www.cz268.com.cn seront trouvés et les images d'arrière-plan seront exclues. Avec les attributs ci-dessus, ce sera plus facile à gérer
| Voici le contenu cité : <style type="text/css"> un { background:url(external.gif) sans répétition en haut à droite ; remplissage à droite : 14 px ; taille de police : 12 px ; } une[href^="http://www.cz268.com.cn"] { image d'arrière-plan : aucune ; padding-right:0px; } </style> |
Ajoutez d'abord des icônes à tous les liens, puis supprimez les icônes de lien commençant par http://www.cz268.com.cn. Cela permettra aux liens externes d'afficher des icônes et aux liens internes de ne pas afficher d'icônes.
Remarque : Ceci s'applique à Firefox, mais pas à IE.
| Voici le contenu cité : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |