Pseudoklasy CSS ze stylami wbudowanymi - html, css, css-selektory, pseudoklasy, style inline

Czy możliwe jest posiadanie pseudoklas za pomocą wbudowanych stylów?

---

Przykład:

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

Wiem, że powyższy kod HTML nie zadziała, ale czy jest coś podobnego?

P.S. Wiem, że powinienem użyć zewnętrznego arkusza stylów i tak jest. Byłem ciekawy, czy można to zrobić za pomocą wbudowanych stylów.

Odpowiedzi:

96 dla odpowiedzi nr 1

Nie, to niemożliwe. W dokumentach wykorzystujących CSS, inline style atrybut 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. Od Specyfikacja atrybutów stylu:

Wartość atrybutu style musi być zgodna ze składnią zawartości CSS blok deklaracji (z wyjątkiem ograniczających nawiasów klamrowych), których formalna gramatyka jest podana poniżej w terminach i konwencjach Podstawowa gramatyka CSS:

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

Ani selektory (w tym pseudoelementy), ani reguły, ani żadne inne konstrukcje CSS nie są dozwolone.

Pomyśl o stylach wbudowanych, gdy style są stosowane do anonimowego selektora super-specyficznego: te style mają zastosowanie tylko do tego jednego elementu z style atrybut. (Mają również pierwszeństwo przed selektorem ID w arkuszu stylów, jeśli ten element ma ten identyfikator.) Technicznie nie działa to w ten sposób, tylko po to, aby pomóc ci zrozumieć, dlaczego atrybut nie obsługuje pseudoklasy ani pseudo style elementów (ma więcej wspólnego z tym, jak pseudoklasy i pseudoelementy dostarczają abstrakcji drzewa dokumentu, które nie mogą być wyrażone w języku dokumentu).

Zauważ, że style wbudowane uczestniczą w tej samej kaskadzie co selektory w zestawach reguł i mają najwyższy priorytet w kaskadzie (!important jednakże). Tak więc mają pierwszeństwo nawet przed stanami pseudoklas. Umożliwienie pseudoklas lub dowolnych innych selektorów w stylach inline może wprowadzić nowy poziom kaskady, a wraz z nim nowy zestaw komplikacji.

Zauważ również, że bardzo stare wersje specyfikacji atrybutów stylu pierwotnie zaproponował na to zezwolenie, jednak został złomowany, prawdopodobnie z podanego powyżej powodu, lub dlatego, że wdrożenie go nie było realną opcją.

---

37 dla odpowiedzi nr 2

Nie CSS, ale inline:

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

Patrz przykład →

---

19 dla odpowiedzi nr 3

Zamiast potrzebować inline, 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>

---