web-dev-qa-db-fra.com

Pseudo-classes CSS avec styles en ligne

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

Exemple:

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

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

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

htmlcsscss-selectorspseudo-classinline-styles
116
Web_Designer

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

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

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

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

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

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

Notez également que de très anciennes révisions des attributs de style spec proposaient à l'origine de permettre cela , cependant elles ont été supprimées, vraisemblablement pour la raison donnée ci-dessus ou parce que sa mise en œuvre n'était pas une option viable.

107
BoltClock

Pas de CSS, mais en ligne:

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

Voir exemple →

41
mVChr

Plutôt que d’avoir besoin d’Inline, 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>
26
Jim Doodle