Pseudo-classi CSS con stili incorporati


131

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


Risposte:


114

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.


45

Non CSS, ma in linea:

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

Vedi esempio →


2
Sì, immagino che sia un'altra opzione. Non è CSS ma funziona per: passa il mouse con mouseover e mouseout,: focus usando onfocus e onblur e: attiva usando onclick.
Web_Designer

1
Conterrebbe come javascript? Ho un progetto che richiede CSS inline e nessun Javascript.
Aakil Fernandes,

7
Sì, questo è JavaScript.
Joel Murphy,

1
Questa è una buona opzione L'uso di un foglio CSS esterno è contrario al principio OO (orientato agli oggetti). Lo stile di un elemento deve essere combinato con l'elemento.
Evan Hu

1
Un altro punto per gli stili incorporati è la riduzione dei tempi di rendering utilizzando un DOM virtuale. Un CSS dovrà scansionare l'intero documento per le modifiche e applicare i suoi stili. Questo è eliminato dagli stili in linea.
Frederik Krautwald,

26

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>

1
È accettabile usare css interni all'esterno dell'elemento head?
Thaina,

4
@Thaina Ora è, in HTML5: html5doctor.com/the-scoped-attribute
Ason,

2
@Thaina Funny, ho riscontrato un'altra domanda in cui ho deciso di fare una cosa del genere e ho scoperto che l' scopedattributo è stato rimosso dalle specifiche .... developer.mozilla.org/en/docs/Web/HTML/Element/style
Ason

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.