CSS-Pseudoklassen mit Inline-Stilen

Ist es möglich, Pseudoklassen mit Inline-Stilen zu haben?

Beispiel:

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

Ich weiß, dass der obige HTML-Code nicht funktioniert, aber gibt es etwas Ähnliches?

PS Ich weiß, ich sollte ein externes Stylesheet verwenden, und das tue ich auch. Ich war nur neugierig, ob dies mit Inline-Stilen möglich ist.

Nein das ist nicht möglich. In Dokumenten, die CSS verwenden, kann ein Inline- styleAttribut nur Eigenschaftsdeklarationen enthalten. Die gleichen Anweisungen, die in jedem Regelsatz in einem Stylesheet angezeigt werden. Aus der Stilattributspezifikation :

Der Wert des style-Attributs muss mit der Syntax des Inhalts eines CSS- Deklarationsblocks (mit Ausnahme der abschließenden Klammern) übereinstimmen , dessen formale Grammatik im Folgenden in den Begriffen und Konventionen der CSS-Kerngrammatik angegeben ist :

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

Weder Selektoren (einschließlich Pseudoelemente) noch At-Rules oder andere CSS-Konstrukte sind zulässig.

Stellen Sie sich Inline-Stile als Stile vor, die auf einen anonymen superspezifischen ID-Selektor angewendet werden: Diese Stile gelten nur für das eine Element mit dem style Attribut. (Sie haben auch in einem Stylesheet Vorrang vor einem ID-Selektor, wenn dieses Element diese ID hat.) Technisch funktioniert das nicht so. Dies soll Ihnen nur helfen, zu verstehen, warum das Attribut keine Pseudoklassen- oder Pseudoelementstile unterstützt (es hat mehr damit zu tun, wie Pseudoklassen und Pseudoelemente Abstraktionen des Dokumentbaums bereitstellen, in denen nicht ausgedrückt werden kann die Dokumentensprache).

Beachten Sie, dass Inline-Stile an derselben Kaskade wie Selektoren in Regelsätzen teilnehmen und ( !importantungeachtet) die höchste Priorität in der Kaskade haben . Sie haben also auch Vorrang vor Pseudoklassenzuständen. Das Zulassen von Pseudoklassen oder anderen Selektoren in Inline-Stilen würde möglicherweise eine neue Kaskadenebene und damit eine Reihe neuer Komplikationen einführen.

Beachten Sie auch, dass sehr alte Überarbeitungen der Style Attributes-Spezifikation ursprünglich vorschlugen, dies zuzulassen , sie jedoch verschrottet wurde, vermutlich aus dem oben genannten Grund oder weil die Implementierung keine praktikable Option war.

Nicht CSS, sondern Inline:

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

Siehe Beispiel →

Anstatt Inline zu benötigen, können Sie auch internes CSS verwenden

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

Du könntest haben:

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

Sie könnten https://hacss.io versuchen :

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

Demo