Come posso rimuovere lo stile dell'elemento CSS in linea (senza JavaScript)?

Question

Ho uno stile assegnato per un elemento HTML specifica nel mio foglio di stile, come questo

label { 
    width: 200px; 
    color: red; 
} 

In un caso speciale, vorrei utilizzare un elemento di etichetta nel documento HTML, ma ignora lo stile specificato per l'elemento label (solo per una istanza nel documento). C'è un modo per ottenere questo in modo generico senza sovrascrivere gli attributi di stile dell'elemento con gli stili in linea?

<label for="status">Open</label> 

Per reiterare, nel codice HTML che mostra l'etichetta viene applicato lo stile dell'elemento (larghezza 200 px, colore rosso). Vorrei che gli attributi di stile di default fossero usati (senza sapere cosa fossero) e senza dover sapere cosa è specificamente specificato nell'impostazione dello stile dell'elemento.

Answer 1

Dal Mozilla developer center:

Perché CSS non fornisce una parola chiave "default", l'unico modo per ripristinare il valore predefinito di una proprietà è quello di ri-esplicitamente dichiarare che la proprietà.

Pertanto, è necessario prestare particolare attenzione quando si scrivono regole di stile utilizzando selettori (ad esempio, selettori in base al nome del tag, come p) che si desideri sovrascrivere con regole più specifiche (come quelle che utilizzano selettori di id o classe), perché il valore predefinito originale non può essere ripristinato automaticamente.

A causa della natura a cascata del CSS, è buona pratica definire le regole di stile nel modo più specifico possibile per evitare che gli elementi di stile non siano destinati allo stile.

Answer 2

<label ... style = "width: auto; color: inherit" /> 

Answer 3

non credo che è possibile ripristinarlo a quello che era prima della definizione dell'etichetta nel foglio di stile, ma si potrebbe dare l'etichetta di un id e ignorare che nel vostro foglio di stile.

<label for="status" id="status-label">Open</label> 

label { 
    width: 200px; 
    color: red; 
} 

label#status-label { 
    width: auto; 
    color: blue; 
} 

Answer 4

<label ... class="default">...</label> 


label { 
    width: 200px; 
    color: red; 
} 

label.default { 
    width: auto; 
    color: inherit; 
} 

tuttavia, che non può fornire i risultati desiderati - l'altro modo sarebbe quello di dare tutte le altre etichette una classe particluar (i) e quindi non assegnare tale classe all'etichetta "default".

Answer 5

È possibile utilizzare il :not selector:

label:not([for="status"]) { 
    width: 200px; 
    color: red; 
} 

Supporto sembra risalire a circa 2009 (FF3.5)

Answer 6

La situazione è un po 'cambiato in 6 anni: ora è possibile rimuovere una serie CSS proprietà senza utilizzare JavaScript utilizzando le parole chiave initial, unset o revert. Questi sono supportati in tutti i browser moderni.