Czy można mieć pseudoklasy korzystające ze stylów wbudowanych?
Przykład:
<a href="http://www.google.com" style="hover:text-decoration:none;">Google</a>
Wiem, że powyższy kod HTML nie będzie działać, ale czy jest coś podobnego, co będzie działać?
PS Wiem, że powinienem użyć zewnętrznego arkusza stylów i tak. Byłem po prostu ciekawy, czy można to zrobić za pomocą stylów inline.
html
css
css-selectors
pseudo-class
inline-styles
Projektant stron internetowych
źródło
źródło
Odpowiedzi:
Nie, to niemożliwe. W dokumentach korzystających z CSS
style
atrybut wbudowany może zawierać tylko deklaracje właściwości; ten sam zestaw instrukcji, który pojawia się w każdym zestawie reguł w arkuszu stylów. Ze specyfikacji Style Attributes :Ani selektory (w tym pseudoelementy), ani reguły at, ani żadna inna konstrukcja CSS nie są dozwolone.
Pomyśl o stylach wbudowanych jako o stylach zastosowanych do jakiegoś anonimowego, nadrzędnego selektora identyfikatora: te style mają zastosowanie tylko do tego jednego elementu z
style
atrybutem. (Mają pierwszeństwo przed selektorem ID w arkuszu stylów, jeśli ten element ma ten identyfikator.) Technicznie nie działa w ten sposób; ma to na celu pomóc ci zrozumieć, dlaczego atrybut nie obsługuje stylów pseudoklas lub pseudoelementów (ma to więcej wspólnego z tym, jak pseudoklasy i pseudoelementy zapewniają abstrakcje drzewa dokumentu, których nie można wyrazić w język dokumentu).Zwróć uwagę, że style wbudowane uczestniczą w tej samej kaskadzie, co selektory w zestawach reguł i mają najwyższy priorytet w kaskadzie (
!important
niezależnie od tego). Więc mają pierwszeństwo nawet przed stanami pseudoklasowymi. Dopuszczenie pseudoklas lub innych selektorów w stylach wbudowanych prawdopodobnie wprowadziłoby nowy poziom kaskadowy, a wraz z nim nowy zestaw komplikacji.Zauważ również, że bardzo stare poprawki specyfikacji Style Attributes pierwotnie proponowały zezwolenie na to , jednak zostało ono odrzucone, prawdopodobnie z powodu podanego powyżej lub dlatego, że wdrożenie go nie było realną opcją.
źródło
Nie CSS, ale wbudowane:
Zobacz przykład →
źródło
Zamiast potrzebować wbudowanego, możesz użyć wewnętrznego CSS
Możesz mieć:
źródło
scoped
atrybut został usunięty ze specyfikacji ... developer.mozilla.org/en/docs/Web/HTML/Element/styleMożesz spróbować https://hacss.io :
Próbny
źródło