CSS-Pseudoklassen mit Inline-Stilen

Lesezeit: 3 Minuten

CSS Pseudoklassen mit Inline Stilen
Webdesigner

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


Beispiel:

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

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

PS Ich weiß, dass ich ein externes Stylesheet verwenden sollte, und das tue ich auch. Ich war nur neugierig, ob dies mit Inline-Stilen geschehen könnte.

  • mögliches Duplikat von Ist es möglich, Inline-Pseudostile zu erstellen?

    – Synetech

    20. November 2012 um 2:21 Uhr

1646353927 610 CSS Pseudoklassen mit Inline Stilen
BoltClock

Nein das ist nicht möglich. In Dokumenten, die CSS verwenden, ist eine inline style Attribut kann nur Eigenschaftsdeklarationen enthalten; derselbe Satz von Anweisungen, der in jedem Regelsatz in einem Stylesheet erscheint. Von dem Stilattribute spez:

Der Wert des style-Attributs muss mit der Syntax des Inhalts eines CSS übereinstimmen Deklarationsblock (ohne die begrenzenden geschweiften Klammern), deren formale Grammatik unten in den Begriffen und Konventionen der angegeben ist CSS-Kerngrammatik:

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

Weder Selektoren (einschließlich Pseudo-Elemente), noch at-Regeln, noch andere CSS-Konstrukte sind erlaubt.

Stellen Sie sich Inline-Stile als die Stile vor, die auf einen anonymen superspezifischen ID-Selektor angewendet werden: Diese Stile gelten nur für genau dieses eine Element mit dem style Attribut. (Sie haben auch Vorrang vor einem ID-Selektor in einem Stylesheet, wenn dieses Element diese ID hat.) Technisch funktioniert das so nicht; 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, die nicht ausgedrückt werden können die Dokumentensprache).

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

Beachten Sie auch, dass sehr alte Revisionen der Style Attributes-Spezifikation ursprünglich vorschlugen, dies zuzulassen, es jedoch verworfen 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 →

  • Ja, ich denke, das ist eine weitere Möglichkeit. Es ist kein CSS, aber es funktioniert für :hover mit mouseover und mouseout, :focus mit onfocus und onblur und :active mit onclick.

    – Webdesigner

    14. März 2011 um 1:03 Uhr


  • Würde dies als Javascript zählen? Ich habe ein Projekt, das Inline-CSS und kein Javascript erfordert.

    – Aakil Fernandes

    19. März 2013 um 14:04 Uhr

  • Ja, das ist Javascript.

    – Joel Murphy

    13. August 2013 um 12:42 Uhr

  • Dies ist eine gute Option. Die Verwendung eines externen CSS-Blatts verstößt gegen das OO-Prinzip (objektorientiert). Der Stil eines Elements sollte mit dem Element zusammengestellt werden.

    – Evan Hu

    25. April 2015 um 1:09 Uhr

  • Ein weiterer Punkt für Inline-Stile ist die Verringerung der Renderzeiten durch die Verwendung eines virtuellen DOM. Ein CSS muss das gesamte Dokument nach Änderungen durchsuchen und seine Stile anwenden. Dies wird durch Inline-Stile eliminiert.

    – Frederik Krautwald

    22. Mai 2015 um 22:04 Uhr

Anstatt Inline zu benötigen, könnten Sie 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>

  • Ist es akzeptabel, internes CSS außerhalb des Head-Elements zu verwenden?

    – Thaina Yu

    18. November 2016 um 7:56 Uhr

  • @Thaina Es ist jetzt in HTML5: html5doctor.com/the-scoped-attribute

    – Asons

    17. Dezember 2016 um 7:34 Uhr

  • @Thaina Funny, bin auf eine andere Frage gestoßen, bei der ich beschlossen habe, so etwas zu tun, und das herausgefunden habe scoped Attribut wurde aus den Spezifikationen entfernt….developer.mozilla.org/en/docs/Web/HTML/Element/style

    – Asons

    17. Dezember 2016 um 9:09 Uhr


Du könntest es versuchen https://hacss.io:

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

Demo

929060cookie-checkCSS-Pseudoklassen mit Inline-Stilen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy