Lorsque nous concevons un site Web, nous devons parfois créer différents styles en fonction des attributs des éléments de la page. Par exemple, afficher différentes icônes de lien pour différents types de liens. Les sélecteurs CSS sont une technologie très utile, grâce à laquelle nous pouvons facilement obtenir certains effets. Aujourd'hui, nous allons présenter le sélecteur d'attributs CSS en créant un style de lien personnalisé.
Jetons d'abord un coup d'œil à la démo :
Comme vous pouvez le voir sur l'image ci-dessus, nous avons défini différents styles pour chaque type de lien : lorsque la valeur de l'attribut href du lien a est le lien email "mailto", une icône mail s'affiche derrière le lien lorsque le lien est affiché ; est un fichier Word, l'icône du document Word s'affiche à l'arrière ; lorsque l'adresse du lien est mp3, l'icône du lecteur de musique s'affiche ; lorsque l'adresse du lien contient « qianduan.net », une icône de page d'accueil s'affiche...
En fait, il est très simple d’implémenter une telle fonction. Voyons d’abord la syntaxe des sélecteurs d’attributs CSS :
Il est à noter que le sélecteur CSS, quelle que soit la version CSS 2.1 ou CSS 3, est pris en charge par IE7 et IE8, ainsi que webkit, Gecko core et Opera. Seuls les navigateurs inférieurs à IE6 ne le prennent pas en charge.
Bon, implémentons ces styles :
1. Style de base des liens Tout d'abord, nous avons préparé une image CSS Sprites et nous avons intégré toutes les icônes dans ce a.gif.
| un { background:url(a.gif) pas de répétition à droite 4px ; remplissage à droite : 18px ; couleur : #369 ; hauteur de ligne : 24 px ; } |
De cette façon, nous avons défini le style par défaut pour tous les liens, et une petite icône en forme de flèche rouge sera affichée sur le côté droit de tous les liens.
2. Définir des styles personnalisés Définissons maintenant les styles respectifs pour différents types de liens. En fait, il ne nous reste plus qu'à définir différentes positions de l'image d'arrière-plan (background-position) :
mailtomailtoLe lien de messagerie a la forme de href=. style " mailto:[email protected]", la valeur de leur attribut href commence par mailto, puis on utilise le format [att^=val] :
| a[href^="mailto:"] { position d'arrière-plan : droite -242 px ; } |
| a[href$=".doc"] { position d'arrière-plan : droite -160px } |
Les documents au format PDF, Excel, mp3 et autres formats sont également mis en œuvre via cette méthode.
Liens contenant le champ qianduan.net Pour les liens contenant une certaine chaîne, vous pouvez utiliser [att*=val] :
| un { background:url(a.gif) pas de répétition à droite 4px ; padding-right:18px;couleur:#369;line-height:24px; } a[href^="mailto:"] {background-position:right -242px;} a[href$=".doc"] {background-position:right -161px} a[href$=".xls"] {position-arrière-plan:right -282px} a[href$=".pdf"] {position-arrière-plan:right -79px} a[href$=".mp3"] {position-arrière-plan:right -204px} a[href$=".swf"] {position-arrière-plan:right -120px} a[href$=".rar"] {position-arrière-plan:right -38px} a[href*="qianduan.net"] {background-position:right -328px} |
Et lorsque nous l'utilisons, nous n'avons pas besoin d'ajouter de classes supplémentaires :
| <a href="abc.doc">Document Word</ un > |