Pseudo-classes CSS avec styles en ligne

Est-il possible d'avoir des pseudo-classes utilisant des styles en ligne?

Exemple:

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

Je sais que le HTML ci-dessus ne fonctionnera pas, mais y a-t-il quelque chose de similaire qui fonctionnera?

PS Je sais que je devrais utiliser une feuille de style externe, et je le fais. J'étais juste curieux de savoir si cela pouvait être fait en utilisant des styles en ligne.

Non, ce n'est pas possible. Dans les documents qui utilisent CSS, un styleattribut en ligne ne peut contenir que des déclarations de propriété; le même ensemble d'instructions qui apparaît dans chaque ensemble de règles d'une feuille de style. À partir de la spécification des attributs de style :

La valeur de l'attribut style doit correspondre à la syntaxe du contenu d'un bloc de déclaration CSS (à l'exclusion des accolades de délimitation), dont la grammaire formelle est donnée ci-dessous dans les termes et conventions de la grammaire de base CSS :

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

Ni les sélecteurs (y compris les pseudo-éléments), ni les règles at, ni aucune autre construction CSS ne sont autorisés.

Considérez les styles en ligne comme les styles appliqués à un sélecteur d'identifiant super-spécifique anonyme: ces styles ne s'appliquent qu'à cet élément même avec l' styleattribut. (Ils ont la priorité sur un sélecteur d'ID dans une feuille de style aussi, si cet élément a cet ID.) Techniquement, cela ne fonctionne pas comme ça; c'est juste pour vous aider à comprendre pourquoi l'attribut ne prend pas en charge les styles de pseudo-classes ou de pseudo-éléments (il a plus à voir avec la façon dont les pseudo-classes et les pseudo-éléments fournissent des abstractions de l'arborescence du document qui ne peuvent pas être exprimées dans la langue du document).

Notez que les styles en ligne participent à la même cascade que les sélecteurs dans les ensembles de règles et ont la priorité la plus élevée dans la cascade ( !importantnonobstant). Ils ont donc la priorité même sur les états de pseudo-classe. Autoriser les pseudo-classes ou tout autre sélecteur dans les styles en ligne introduirait éventuellement un nouveau niveau de cascade, et avec lui un nouvel ensemble de complications.

Notez également que de très anciennes révisions de la spécification des attributs de style proposaient à l'origine de l'autoriser , mais elle a été abandonnée, probablement pour la raison indiquée ci-dessus, ou parce que sa mise en œuvre n'était pas une option viable.

Pas de CSS, mais en ligne:

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

Voir l'exemple →

Plutôt que d'avoir besoin en ligne, vous pouvez utiliser le CSS interne

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

Tu aurais pu:

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

Vous pouvez essayer https://hacss.io :

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

Démo