Pseudo-classi CSS con stili incorporati

È possibile avere pseudo-classi usando stili in linea?

Esempio:

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

So che l'HTML sopra non funzionerà, ma c'è qualcosa di simile che funzionerà?

PS So che dovrei usare un foglio di stile esterno, e lo faccio. Ero solo curioso di sapere se questo potesse essere fatto usando stili in linea.

No, non è possibile. Nei documenti che utilizzano CSS, un styleattributo inline può contenere solo dichiarazioni di proprietà; la stessa serie di istruzioni che appare in ogni serie di regole in un foglio di stile. Dalle specifiche degli attributi di stile :

Il valore dell'attributo di stile deve corrispondere alla sintassi del contenuto di un blocco di dichiarazione CSS (escluse le parentesi delimitate), la cui grammatica formale è riportata di seguito nei termini e convenzioni della grammatica di base CSS :

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

Non sono ammessi né selettori (inclusi pseudo-elementi), né regole at, né alcun altro costrutto CSS.

Pensa agli stili incorporati come agli stili applicati ad alcuni selettori ID super-specifici anonimi: quegli stili si applicano solo a quello stesso elemento con l' styleattributo. (Hanno la precedenza su un selettore ID anche in un foglio di stile, se quell'elemento ha quell'ID.) Tecnicamente non funziona così; questo è solo per aiutarti a capire perché l'attributo non supporta gli stili pseudo-classe o pseudo-elemento (ha più a che fare con il modo in cui pseudo-classi e pseudo-elementi forniscono astrazioni dell'albero del documento che non possono essere espresse in la lingua del documento).

Si noti che gli stili in linea partecipano alla stessa cascata dei selettori nei set di regole e hanno la massima priorità nella cascata ( !importantnonostante). Quindi hanno la precedenza anche su stati di pseudo-classe. Consentire pseudo-classi o qualsiasi altro selettore in stili in linea potrebbe introdurre un nuovo livello a cascata, e con esso una nuova serie di complicazioni.

Si noti inoltre che revisioni molto vecchie delle specifiche degli attributi di stile inizialmente proponevano di autorizzarlo , tuttavia è stato eliminato, presumibilmente per il motivo sopra indicato, o perché implementarlo non era un'opzione praticabile.

Non CSS, ma in linea:

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

Vedi esempio →

Piuttosto che aver bisogno di in linea potresti usare CSS interno

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

Potresti avere:

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

Puoi provare https://hacss.io :

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

dimostrazione