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.
html
css
css-selectors
pseudo-class
inline-styles
Webdesigner
quelle
quelle
Antworten:
Nein das ist nicht möglich. In Dokumenten, die CSS verwenden, kann ein Inline-
style
Attribut nur Eigenschaftsdeklarationen enthalten. Die gleichen Anweisungen, die in jedem Regelsatz in einem Stylesheet angezeigt werden. Aus der Stilattributspezifikation :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 (
!important
ungeachtet) 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.
quelle
Nicht CSS, sondern Inline:
Siehe Beispiel →
quelle
Anstatt Inline zu benötigen, können Sie auch internes CSS verwenden
Du könntest haben:
quelle
scoped
Attribut aus den Spezifikationen entfernt wurde .... developer.mozilla.org/en/docs/Web/HTML/Element/styleSie könnten https://hacss.io versuchen :
Demo
quelle