Pseudoklasy CSS ze stylami wbudowanymi

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.

Nie, to niemożliwe. W dokumentach korzystających z CSS styleatrybut 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 :

Wartość atrybutu style musi odpowiadać składni zawartości bloku deklaracji CSS (z wyłączeniem nawiasów ograniczających), którego gramatyka formalna jest podana poniżej w terminach i konwencjach gramatyki podstawowej CSS :

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

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 styleatrybutem. (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 ( !importantniezależ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ą.

Nie CSS, ale wbudowane:

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

Zobacz przykład →

Zamiast potrzebować wbudowanego, możesz użyć wewnętrznego CSS

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

Możesz mieć:

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

Możesz spróbować https://hacss.io :

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

Próbny