Pseudoklasy CSS ze stylami wbudowanymi

131

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.

Projektant stron internetowych
źródło
5
możliwy duplikat Czy można tworzyć wbudowane pseudo style?
Synetech

Odpowiedzi:

113

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ą.

BoltClock
źródło
45

Nie CSS, ale wbudowane:

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

Zobacz przykład →

mVChr
źródło
2
Tak, myślę, że to inna opcja. To nie jest CSS, ale działa dla: najechania kursorem za pomocą myszy i myszy,: skupienia się za pomocą onfocus i onblur oraz: aktywowania za pomocą onclick.
Web_Designer,
1
Czy to się liczy jako javascript? Mam projekt, który wymaga wbudowanego CSS i nie wymaga Javascript.
Aakil Fernandes
7
Tak, to javascript.
Joel Murphy
1
To dobra opcja. Używanie zewnętrznego arkusza CSS jest sprzeczne z zasadą OO (zorientowana obiektowo). Styl elementu należy zestawić z elementem.
Evan Hu,
1
Inną kwestią dotyczącą stylów wbudowanych jest skrócenie czasu renderowania za pomocą wirtualnego modelu DOM. CSS będzie musiał przeskanować cały dokument w poszukiwaniu zmian i zastosować style. Jest to eliminowane przez style wbudowane.
Frederik Krautwald
26

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>
Jim Doodle
źródło
1
Czy dopuszczalne jest użycie wewnętrznego css poza elementem head?
Thaina
4
@Thaina Jest teraz w HTML5: html5doctor.com/the-scoped-attribute
Ason
2
@Thaina Funny, natrafiłem na inne pytanie, w którym zdecydowałem się zrobić coś takiego i okazało się, że scopedatrybut został usunięty ze specyfikacji ... developer.mozilla.org/en/docs/Web/HTML/Element/style
Ason
0

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

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

Próbny

Nick Saunders
źródło