Come faccio a fare in modo che una classe abbia la precedenza su un ID?

Question

<div id="normal" class="wider"> 

</div> 

Ma questo non funziona! La larghezza del blah fino a cancellare la classe "più ampia" con.

Answer 1

Quello che hai c'è un problema CSS specificity.

.wider ha una specificità di 0,0,1,0 mentre #normal ha 0,1,0,0. Non puoi battere un ID con nient'altro che un ID (o definizioni incorporate, ma non è questo il caso).

Quello che mi sento di raccomandare, se non si può mettere la necessaria width dichiarazione nel selettore #normal, è quello di mettere in #normal.wider o, se ciò sia non è possibile, hanno un contenitore identificato, dire #container, più in alto nella gerarchia il più possibile (forse un ID sul corpo?) e sostituire .wider con #container .wider. Questo nuovo selettore avrà una specificità di 0,1,1,0 che è leggermente superiore a 0,1,0,0.

L'utilizzo di !important funziona anche, ma dovrebbe essere utilizzato solo come ultima risorsa.

Esempio:

<div id="container" class="wrapper"> 
    <div id="normal" class="wider"> 
</div> 

Per questo snippet HTML alcune possibili selettori in ordine di specificità sarebbe in diminuzione:

CSS Selector   -> Specificity 
--------------------------------------- 
#container #normal -> 0,2,0,0 
#container .wider -> 0,1,1,0 // These two have the same specificity so 
#normal.wider  -> 0,1,1,0 // the last declared value will be used 
#normal    -> 0,1,0,0 
.wrapper .wider  -> 0,0,2,0 
.wider    -> 0,0,1,0 

Answer 2

uso # blah.wider invece per risolvere questo

Answer 3

Potete decorare con attributi !important per aumentare la loro importanza ....

.wider 
{ 
    width:9000px !important; 
} 

Answer 4

Dato che le persone hanno già detto, un ID ha una specificità del 100, mentre una classe ha solo 10.

Un'alternativa alle risposte suggerite (che non utilizza !important,) è rimuovere la proprietà da #normal che è in conflitto (la larghezza) e lo applica a una seconda classe. Così che sarebbe assomigliare:

#normal { 
    padding : 0; 
    margin : 0; 
} 

.normal { 
    width : 400px; 
} 

.wider { 
    width : 1000px; 
} 

lasciando il vostro markup che deve essere effettivamente:

<div id="normal" class="normal"> 
</div> 

in cui si desidera che la 'larghezza normale,' e:

<div id="normal" class="wider"> 
</div> 

Dove si desidera che il elemento extra largo. Potrebbe essere necessario tornare indietro tra le pagine che utilizzano #normal per aggiungere la classe .normal, ma ciò risolverà il problema.

Penso anche che la risposta di Gerben funzioni anche - aggiunge 10 ulteriori specificità alla proprietà ID (totalmente 110,) che dovrebbe ignorare la proprietà della larghezza #normal.

#normal.wider { 
    1000px; 
} 

Answer 5

256 classi CSS possono sovrascrivere un #ID: http://codepen.io/chriscoyier/pen/lzjqh

risposta di Alin Purcaru spiega le regole di base di calcolo css precedenza. Ma la spiegazione dell'attuazione potrebbe essere trovata a http://hackerne.ws/item?id=4388649