Styling-E-Mail / link href="mailto:" mit CSS

Dank StackOverflow habe ich endlich einen Weg gefunden, um Stil meine E-Mail-link, aber ich Frage mich, warum es nicht funktioniert ohne die Lösung fand ich hier.

Da der link ist Teil der Spannweite mit dem zugewiesenen Klasse "über", die Schriftgröße und den Stil definiert, sollte nicht die E-Mail-link zeigen, bis in 11px und sans serif?

und während

a[href^="mailto:"]

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

funktioniert Super, sobald ich versuche es zu ändern, in

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

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

es nicht funktioniert, wie soll es auch.

tun-tags nicht hören span Formatierung oder Klasse verschachteln?

    <!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>

InformationsquelleAutor Roland | 2012-05-17

  1. 23

    Hi eigentlich haben Sie kommentiert Ihre E-Mail-link-css:-

    so, jetzt schreiben die css mag diese Methode, seine Arbeitsmethoden in Ordnung......

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

    finden Sie in der demo:- http://jsbin.com/ijofoq/edit#html,live

    AKTUALISIERT

    Jetzt seine Arbeit gut...Bearbeiten des HTML-Codes und fügen Sie in Ihre 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>

    grundsätzlich müssen Sie die span tag aus .über Klasse.

    prüfen :- http://jsbin.com/ijofoq/2/edit

    thx Shailender! Ich weiß, dass es so funktioniert, ich wurde vielmehr gefragt, warum es nicht funktioniert ohne diese Lösung und warum die ein href-element können nicht verschachtelt werden .über Klasse.
    sieht aus wie ein bug für mich, dass es funktioniert mit einem div und nicht ein span
    danke! gut zu wissen, dass es nicht unbedingt mein Fehler 😛

    InformationsquelleAutor Shailender Arora

  2. 2

    Ich denke .about Vorrang vor a.
    vgl. Css-Regel Spezifität.

    Grundsätzlich eine css-Regelsatz ist die Priorität wie eine Versionsnummer wie dieser:

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

    mit

    • {#id} : Anzahl der id Selektoren
    • {#Klasse} : Anzahl der Klassen, pseudo-Klassen, Attribute
    • {#element} : Anzahl der Elemente pseudo-Elemente
    • {order} : der index diese Regel über alle Dateien

    So, wir haben die folgende Reihenfolge:

    1. 0.2.1.* .about a[href^="mailto:"] (0 id, 1 Klasse + 1 attr, 1 element)
    2. 0.1.1.ein span.about (0-id 1-Klasse 1-element)
    3. 0.1.1.b a[href^="mailto:"] (0-id 1 attr, 1 element)
    4. 0.1.0.* .about (0 id, Klasse 1, 0 element)

    span.about und a[href^="mailto:"] haben die gleiche Spezifität (1 Klasse oder ein Attribut, und 1-element), so dass die Reihenfolge wichtig ist, der Letzte gewinnt.

    Wenn Sie entfernen die span dann in der Regel weniger speziell und Locker.

    (Auch, zu unterscheiden zwischen Regeln, die direkt auf ein element, und andere inhertited von übergeordneten Elementen...)

    InformationsquelleAutor The Felis Leo

Schreibe einen Kommentar