annotation de lien de compétences CSS

CSS est de plus en plus largement utilisé. Les feuilles de style en cascade présentent de nombreux avantages que les mises en page de tableaux n'ont pas. la mise en page ou la page Le design est strictement séparé des informations qui apparaissent sur la page, de sorte que le design de la page peut être facilement modifié en remplaçant simplement un fichier CSS par un autre. De ce fait, de nombreuses techniques sont réutilisées par les utilisateurs, réduisant ainsi une certaine quantité de travail et de temps. Cet article présente la méthode d'annotation des liens PDF, ZIP et DOC.
Parfois, nous souhaitons indiquer clairement le type de notre hyperlien avec une petite icône. S'agit-il d'un document zip ou d'un fichier pdf
. De cette façon, le visiteur sait que le lien sur lequel il souhaite cliquer est pour télécharger plutôt que pour ouvrir une autre page. Si tout le monde utilise IE7 ou FF. Nous pouvons certainement utiliser le sélecteur d'attribut [att$=val] pour trouver des attributs se terminant par une valeur spécifique (comme .zip et .doc).

a[href$=".pdf"] { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }  
a[href$=".zip"] { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

function fileLinks() {  
    var fileLink;  
    if (document.getElementsByTagName('a')) {  
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {  
            if (fileLink.href.indexOf('.pdf') != -1) {  
                fileLink.setAttribute('target', '_blank');  
                fileLink.className = 'pdfLink';  
            }  
            if (fileLink.href.indexOf('.doc') != -1) {  
                fileLink.setAttribute('target', '_blank');  
                fileLink.className = 'docLink';  
            }  
            if (fileLink.href.indexOf('.zip') != -1) {  
                fileLink.setAttribute('target', '_blank');  
                fileLink.className = 'zipLink';  
            }  
        }  
    }  
}  
window.onload = function() {  
    fileLinks();  
}

ne prennent pas en charge les sélecteurs d'attributs. Heureusement, vous pouvez obtenir un effet similaire en utilisant JavaScript et DOM en ajoutant des classes à chaque élément.

Ce qui suit est une solution  :