CSS Pseudo-clases con estilos en línea

Question

¿Es posible tener pseudo-clases usando estilos en línea?

---

Ejemplo:

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> 

sé el código HTML anterior no funciona, pero no es algo similar que lo hará?

P.S. Sé que debería usar una hoja de estilo externa, y lo hago. Solo tenía curiosidad si esto podría hacerse usando estilos en línea.

Answer 1

No, esto no es posible. En los documentos que utilizan CSS, un atributo style en línea solo puede contener declaraciones de propiedad; el mismo conjunto de declaraciones que aparece en cada conjunto de reglas en una hoja de estilo. Desde el Style Attributes spec:

El valor del atributo de estilo debe coincidir con la sintaxis de los contenidos de un CSS declaration block (excluyendo las llaves de delimitación), cuya gramática formal es la siguiente en los términos y convenciones de la CSS core grammar:

se permite

declaration-list 
    : S* declaration? [ ';' S* declaration? ]* 
    ; 

ni los selectores (incluyendo pseudo-elementos), ni en-reglas, ni cualquier otro constructo CSS.

Piense en estilos en línea como los estilos aplicados a algún selector de ID superespecífico anónimo: esos estilos solo se aplican a ese mismo elemento con el atributo style. (También tienen prioridad sobre un selector de ID en una hoja de estilo, si ese elemento tiene esa ID.) Técnicamente no funciona así; esto es solo para ayudarlo a comprender por qué el atributo no admite estilos de pseudo-clase o pseudo-elemento (tiene más que ver con cómo las pseudo-clases y los pseudo-elementos proporcionan abstracciones del árbol de documentos que no se pueden expresar en el lenguaje del documento).

Tenga en cuenta que los estilos en línea participan en la misma cascada que los selectores en conjuntos de reglas, y toman la mayor prioridad en la cascada (no obstante, !important). Por lo tanto, tienen prioridad incluso sobre los estados de pseudo-clase. Permitir pseudo-clases o cualquier otro selector en estilos en línea posiblemente introduzca un nuevo nivel de cascada, y con ello un nuevo conjunto de complicaciones.

Tenga en cuenta también que las revisiones muy antiguas de los atributos de estilo especifican did originally propose allowing this, sin embargo, se descartó, presumiblemente por la razón dada anteriormente, o porque implementarlo no era una opción viable.

Answer 2

No CSS, pero en línea:

<a href="#" 
    onmouseover = "this.style.textDecoration = 'none'" 
    onmouseout = "this.style.textDecoration = 'underline'">Hello</a> 

See example →

Answer 3

En lugar de tener en línea se puede utilizar interna CSS

<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a> 

Usted podría tener:

<a href="http://www.google.com" id="gLink">Google</a> 
<style> 
    #gLink:hover { 
    text-decoration: none; 
    } 
</style>