Gestalten von E-Mail-Link / href = "mailto:" mit CSS

Dank StackOverflow habe ich endlich eine Möglichkeit gefunden, meinen E-Mail-Link zu gestalten, aber ich frage mich, warum es ohne die Lösung, die ich hier gefunden habe, nicht funktioniert.

Da der Link Teil des Bereichs mit der zugewiesenen Klasse "about" ist, für die Schriftgröße und -stil definiert sind, sollte der E-Mail-Link nicht in 11px und ohne Serife angezeigt werden?

und während

a[href^="mailto:"]

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

funktioniert super, sobald ich versuche es zu ändern

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

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

es funktioniert nicht so wie es soll.

Hören Tags nicht auf Span-Formatierung oder Klassenverschachtelung?

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

Antworten auf die Frage(2)

Ihre Antwort auf die Frage