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

Gracias a StackOverflow finalmente encontré una manera de darle estilo a mi enlace de correo electrónico, pero me pregunto por qué no funciona sin la solución que encontré aquí.Estilo de enlace de correo electrónico/href = "mailto:" con CSS

Dado que el enlace forma parte del tramo con la clase atribuida "about", que tiene el tamaño de fuente y el estilo 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 trato de 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 extensión o anidación de clase?

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

Fuente

2012-05-17 Roland

Hola en realidad le han comentado su enlace de correo electrónico css: -

por lo que ahora escribe el css como esto a su método de trabajo bien ......

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

ver la demo: - http://jsbin.com/ijofoq/edit#html,live

ACTUALIZADO

Ahora su funcionamiento muy bien ... editar el código HTML y añadir en su 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>

básicamente se tiene que quitar el lapso de etiqueta. acerca de clase.

cheque esto: - http://jsbin.com/ijofoq/2/edit

Fuente

2012-05-17 08:59:24

THX Shailender! Sé que funciona de esta manera, más bien me preguntaba por qué no funcionaba sin esta solución y por qué el elemento a href no se puede anidar en la clase .acerca de. – Roland

me parece un error que funciona con 'div' y no con' span' –

gracias! bueno saber que no es necesariamente mi error: P – Roland

creo .about tienen prioridad sobre a. cf. Css Rule Specificity.

Básicamente, un conjunto de reglas CSS es asignar una prioridad como un número de versión de esta manera:

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

con

{} #id: recuento de los selectores de ID
{} #class : número de clases, pseudo-clases, atributos
{#element}: recuento de elementos, pseudo-elementos
{order}: el índice de esta norma en todos los archivos

Por lo tanto, tenemos el siguiente orden:

0.2.1.*.about a[href^="mailto:"](0 Identificación, 1 clase + 1 attr, 1 elemento)
0.1.1.aspan.about(0 Identificación, 1 clase, 1 elemento)
0.1.1.ba[href^="mailto:"](0 Identificación, 1 attr, 1 elemento)
0.1.0. *.about(0 Identificación, 1 clase, 0 elemento)

span.about y a[href^="mailto:"] tienen la misma especificidad (1 clase o atributo, y 1 elemento), por lo que el orden es importante, el último gana.

Si quita el span, entonces la regla es menos específica y suelta.

(También, distinguir entre reglas que se aplican directamente a un elemento, y otros inhertited de elementos padre ...)

Fuente

2017-02-23 13:19:03

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

Respuesta

Cuestiones relacionadas