CSS-Pseudoklassen mit Inline-Stilen

130

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.

Webdesigner
quelle
5
Mögliches Duplikat von Ist es möglich, Inline-Pseudo-Stile zu erstellen?
Synetech

Antworten:

112

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.

BoltClock
quelle
45

Nicht CSS, sondern Inline:

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

Siehe Beispiel →

mVChr
quelle
2
Ja, ich denke das ist eine andere Option. Es ist kein CSS, aber es funktioniert für: Hover mit Mouseover und Mouseout ,: Fokus mit Onfocus und Onblur und: Aktiv mit Onclick.
Web_Designer
1
Würde dies als Javascript gelten? Ich habe ein Projekt, das Inline-CSS und kein Javascript erfordert.
Aakil Fernandes
7
Ja, das ist Javascript.
Joel Murphy
1
Dies ist eine gute Option. Die Verwendung eines externen CSS-Blattes verstößt gegen das OO-Prinzip (objektorientiert). Der Stil eines Elements sollte mit dem Element zusammengesetzt werden.
Evan Hu
1
Ein weiterer Punkt für Inline-Stile ist die Verkürzung der Renderzeiten mithilfe eines virtuellen DOM. Ein CSS muss das gesamte Dokument nach Änderungen durchsuchen und seine Stile anwenden. Dies wird durch Inline-Stile beseitigt.
Frederik Krautwald
26

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>
Jim Doodle
quelle
1
Ist es akzeptabel, internes CSS außerhalb des Kopfelements zu verwenden?
Thaina
4
@ Thaina Es ist jetzt in HTML5: html5doctor.com/the-scoped-attribute
Ason
2
@Thaina Funny, bin auf eine andere Frage gestoßen, bei der ich mich für so etwas entschieden habe und herausgefunden habe, dass das scopedAttribut aus den Spezifikationen entfernt wurde .... developer.mozilla.org/en/docs/Web/HTML/Element/style
Ason
0

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

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

Demo

Nick Saunders
quelle