Importanza della gerarchia dei fogli di stile CSS

Question

Ho effettuato alcune ricerche su Google e finora non ho trovato nulla che risponda alla mia domanda sull'ordine o l'importanza dei CSS.

Ad esempio, sovrascrive in linea esterne. Fatto. Aggiunta! Importante esternamente può ignorare in linea. Inoltre, da tutto ciò che mi è stato insegnato, gli stili successivi sovrascrivono i precedenti stili. Quindi:

h1 { font-size: 12pt; } 
h1 { font-size: 14pt; } 

visualizzerebbe una dimensione carattere di 14pt. Ma questo non è sempre il caso. A volte voglio definire stili come:

<div id="content"> 
    <input class="regular" type="text" /> 
    <input class="regular" type="text" /> 
    <input class="long" type="text" /> 

e poi in css:

#content input { width: 50%; } 
.long { width: 75%; } 

, ma che non sempre funziona. Dove posso vedere l'ordine di importanza, perché tutti questi hanno specifici livelli di importanza:!

input {} 
#content input {} 
#content input.regular {} 
#content input.long 
input.regular {} 
input.long {} 
.regular {} 
.long {} 

Io davvero non mi piace dover scrivere importante sempre, ma se io non riesco a capire l'ordine di importanza particolare, poi a volte devo cambiare ids, classi, ecc

Answer 1

Il termine che si desidera cercare è “specificità”.

Quando si hanno due (o più) blocchi CSS i cui selettori selezionano lo stesso elemento e entrambi cercano di impostare la stessa proprietà, il blocco con il selettore più specifico vince.

Il CSS 3 selettori spec dettaglio come specificità deve essere calcolato, ed è ragionevolmente leggibile:

• http://www.w3.org/TR/css3-selectors/#specificity

Ci

sono anche alcuni buoni post del blog che descrivono le regole troppo:

• http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
• http://reference.sitepoint.com/css/specificity

(Si noti che, quando i due blocchi hanno selettori con lo stesso specificità, solo allora fa regola del blocco dopo la meglio, come nel tuo esempio con h1 s. Una regola in un blocco con un selettore più specifico sovrascriverà una regola un blocco successivo con un selettore meno specifico.)

Answer 2

per questo caso qui è quello che si fa

#content input { width: 50%; } 
#content .long { width: 75%; } 

selezionando un elemento con il suo ID avrà la precedenza, quindi hai avuto quel particolare problema. aggiungendo l'ID alla selezione e di essere più specifico risolverà il problema

ad esempio:

#content input.long { width: 75%; } 

è ancora più specifico di

#content .long { width: 75%; } 

Answer 3

Si verificano Specificità CSS. Se hai due stili in conflitto che si applicano allo stesso elemento, c'è un sistema di ponderazione che determina quale stile vince. Si può leggere di più qui:

http://css-tricks.com/specifics-on-css-specificity/