Come rimuovere tutti gli stili ereditati e calcolati da un elemento?

Question

La pagina ha il seguente CSS:

input[type=text] 
{ 
    display: inline; padding: 7px; background-color: #f6f6f6; font-size: 12px; letter-spacing: 1px; border: 1px solid #aac7d1; 
    /* lots of other styles here... */ 
} 

ho molti elementi di testo di input e il seguente:

<input type="text" id="txt1" /> 

E cerco di applicare stili diversi a questo individuo testo (txt1) tramite jQuery :

$('#txt1').removeClass().removeAttr('style').css({ 
    'background-color': '#ff0000', 
    //lots of other styles here... 
}); 

Ma quegli stili che provengono dal foglio di stile non possono essere rimossi dall'elemento in questo modo. La regola css, input[type=text] non è una classe personalizzata, quindi removeClass() non funziona qui, se ho ragione.

Quello che voglio fare è; per rimuovere completamente tutti gli stili applicati all'elemento txt1. C'è un modo per farlo se non quello di ottenere l'elenco di tutti gli stili calcolati e di impostarli vuoti?

Answer 1

v'è un certo modo di fare questo

Non v'è alcun modo per fermare le regole che si applicano a un elemento se le partite di selezione.

È possibile

• insieme ogni proprietà che si desidera avere un valore specifico (con un selettore adeguatamente specifico e !important
• spostare l'elemento ad un altro documento (che potrebbe poi essere caricato con, ad esempio, un iframe).
• rimuovere la regola (e quindi farla si applica a qualsiasi elemento )
• modifica il selettore sul set di regole (in modo che non corrisponde l'elemento più, y ou bisogna stare attenti per assicurarsi che seleziona ancora elementi che ti interessano)

altri di ottenere l'elenco di tutti gli stili calcolati e l'impostazione vuote?

Questo non funzionerebbe. La maggior parte delle proprietà non accetta un valore vuoto, quindi la regola non sarebbe valida e verrà ignorata (facendo in modo che la regola precedente si applichi nuovamente).

Answer 2

Come potete vedere a questo link: http://www.w3.org/TR/CSS2/cascade.html#specificity, tutti i selettori hanno un valore di specificità. Quindi, se si scrive la regola CSS: #txt1 {}, è possibile ripristinare tutti i valori non necessari.