web-dev-qa-db-fra.com

Styliser le lien e-mail / href = "mailto:" avec CSS

Grâce à StackOverflow, j'ai finalement trouvé un moyen de styliser mon lien de messagerie, mais je me demande pourquoi cela ne fonctionne pas sans la solution que j'ai trouvée ici.

Étant donné que le lien fait partie de la plage avec la classe attribuée "about", dont la taille et le style de police sont définis, le lien de messagerie ne devrait-il pas apparaître en 11px et sans serif?

et tandis que

a[href^="mailto:"]

{ 
  font-family: sans-serif;
  color: black;
  font-size: 11px;
}

fonctionne très bien, dès que j'essaye de le changer en

.about a[href^="mailto:"]

{ 
  font-family: sans-serif;
  color: black;
  font-size: 11px;
}

cela ne fonctionne pas comme on le suppose aussi.

les balises n'écoutent-elles pas le formatage ou l'imbrication des classes?

    <!DOCTYPE html>
<html>
<head>
<style type="text/css">

html {
    height:100%;
}

body {
    height: 100%;
    margin-left: 20px;
    margin-top:0px;
}

.bottom-left {

    position: absolute;
    font:sans-serif;
    bottom: 15px;
    left: 15px;
}


.bold {
    font-family: serif;
}


.about {
    font-size: 11px;
    font-family: sans-serif;
}


/*a[href^="mailto:"]

{ 
  font-family: sans-serif;
  color: black;
  font-size: 11px;
}*/



.address {
font-size: 11px;
border-bottom: 1px grey dotted;
}




</style>

<title>TEMP</title>

</head>
<body>


<div class="bottom-left">
        <span class="about">
            <span class="bold">XYZ</span> is a project space .&nbsp;&nbsp;&#124;&nbsp;
            <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a>
        </span>
</div>



</body>
</html>
cssemailhrefmailto
15
Roland

Salut en fait, vous avez commenté votre lien de messagerie css: -

alors maintenant, écrivez le CSS comme cette méthode, ça marche bien ......

a[href^="mailto:"]
{ 
  font-family: sans-serif;
  color: red;
  font-size: 11px;
}

voir la démo: - http://jsbin.com/ijofoq/edit#html,live

[~ # ~] mis à jour [~ # ~]

Maintenant ça marche bien ... éditez votre HTML et ajoutez votre HTML

<div class="bottom-left">
    <div class="about">
        <span class="bold">XYZ</span> is a project space .&nbsp;&nbsp;&#124;&nbsp;
        <span="address">Website Information</span> &mdash; <a href="mailto:[email protected]">[email protected]</a>
    </div>

fondamentalement, vous devez supprimer la balise span de. about class.

vérifiez ceci: - http://jsbin.com/ijofoq/2/edit

24
Shailender Arora

Je pense .about a priorité sur a. cf. Spécificité de la règle CSS .

Fondamentalement, un ensemble de règles CSS attribue une priorité comme un numéro de version comme ceci:

{#id}.{#class}.{#element}.{order}

avec

  • {#id}: nombre de sélecteurs d'ID
  • {#class}: nombre de classes, pseudo-classes, attributs
  • {#element}: nombre d'éléments, pseudo-éléments
  • {order}: l'index de cette règle dans tous les fichiers

Donc, nous avons l'ordre suivant:

  1. 0.2.1. * .about a[href^="mailto:"] (0 id, 1 classe + 1 attr, 1 élément)
  2. 0.1.1.a span.about (0 id, 1 classe, 1 élément)
  3. 0.1.1.b a[href^="mailto:"] (0 id, 1 attr, 1 élément)
  4. 0.1.0. * .about (0 id, 1 classe, 0 élément)

span.about et a[href^="mailto:"] ont la même spécificité (1 classe ou attribut et 1 élément), donc l'ordre est important, le dernier gagne.

Si vous supprimez le span, la règle est moins spécifique et lâche.

(Aussi, faites la distinction entre les règles directement appliquées à un élément et les autres héritées des éléments parents ...)

2
The Felis Leo