Lors de la conception d'un site Web, nous devons parfois créer différents styles en fonction des attributs des éléments de page, par exemple, pour différents types de liens, différentes icônes de liens sont affichées. Les sélecteurs CSS sont une technique très utile, à travers elles, nous pouvons facilement réaliser certains effets. Aujourd'hui, nous présenterons le sélecteur de propriétés de CSS en créant un style de lien personnalisé.
Jetons un coup d'œil à la démonstration d'abord:
Comme on peut le voir dans la figure ci-dessus, nous définissons un style différent pour chaque lien: lorsque la valeur de l'attribut HREF du lien A est le lien électronique "Mailto", une icône de l'e-mail est affichée derrière le lien; Lorsque le fichier Word est utilisé, l'icône du document Word s'affiche derrière;
En fait, il est très facile de mettre en œuvre une telle fonction.
Il convient de noter que IE7 et IE8 prennent en charge le sélecteur CSS, quelle que soit la version CSS 2.1 ou CSS 3, et WebKit, Gecko Core et Opera le prennent également en charge.
Ok, mettons en œuvre ces styles:
1. Style de base du lien Nous préparons d'abord une image CSS Sprites, et nous intégrons toutes les icônes dans ce A.Gif.
| un { CONTEXTE: URL (A.GIF) sans répétition à droite 4px; rembourrage à droite: 18px; Couleur: # 369; hauteur de ligne: 24px; } |
De cette façon, nous définissons le style par défaut pour tous les liens, et une petite icône de flèche rouge sera affichée sur le côté droit de tous les liens.
2. Définir les styles personnalisés.
Les liens de messagerie Mailtomailto sont dans le style de HREF = "Mailto: [email protected]".
| a [href ^ = "Mailto:"] { Position d'arrière-plan: droite -242px; } |
Nous pensons généralement que tous les liens de fichiers DOC sont dans le format de HREF = "ABC.DOC", ce qui signifie que l'adresse de liaison se termine par .doc, nous devons donc utiliser le format de [ATT $ = VAL]. Le style est le suivant:
| a [href $ = ". doc"] { Position d'arrière-plan: à droite -160px } |
Les documents dans les formats PDF, Excle, MP3 sont également implémentés de cette manière.
Liens contenant des champs qianduan.net pour les liens contenant une certaine chaîne, vous pouvez utiliser [att * = val]:
| un { CONTEXTE: URL (A.GIF) sans répétition à droite 4px; padding-droite: 18px; couleur: # 369; height line-height: 24px; } a [href ^ = "MailTo:"] {Position d'arrière-plan: droite -242px;} a [href $ = ". doc"] {position de fond: droit -161px} a [href $ = ". xls"] {position arrière: droite -282px} a [href $ = ". pdf"] {position arrière: droite -79px} a [href $ = ". mp3"] {position arrière: droite -204px} a [href $ = ". Swf"] {position arrière: droite -120px} a [href $ = ". rar"] {position arrière: droite -38px} a [href * = "qianduan.net"] {position arrière: droite -328px} |
Et lorsque nous l'utilisons, nous n'avons pas besoin d'ajouter une classe supplémentaire:
| <a href = "abc.doc"> document word </a> |