Estilo del enlace de correo electrónico / href = "mailto:" con CSS

Gracias a StackOverflow finalmente encontré una forma de diseñar mi enlace de correo electrónico, pero me pregunto por qué no funciona sin la solución que encontré aquí.

Dado que el enlace es parte del tramo con la clase atribuida "sobre", que tiene el tamaño y el estilo de fuente definidos, ¿no debería aparecer el enlace de correo electrónico en 11px y sans serif?

y mientras

a[href^="mailto:"]

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

Funciona muy bien, tan pronto como intento cambiarlo a

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

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

no funciona como se supone también.

¿Las etiquetas no escuchan el formato de intervalo o el anidamiento de clases?

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

Respuestas a la pregunta(2)

Su respuesta a la pregunta