Ordine di prioritizzazione quando si usano più file contradditori css

Question

Quando si utilizzano più file css sulla stessa pagina e si scontrano, come faccio a sapere quale verrà utilizzato? Ad esempio, se si dice sfondo blu del corpo e l'altro dice rosso.

Answer 1

Risposta rapida:

Se entrambi i pezzi di CSS hanno la stessa specificity (ad esempio, sono entrambi body{), poi a seconda di quale viene chiamato ieri sostituirà quello precedente.

MA, se qualcosa ha una specificità più elevata (un selettore più specifico), verrà utilizzato indipendentemente dall'ordine.

---

Esempio 1:

<div class="container"> 
    <div class="name">Dave</div> 
</div> 

<style> 
    .name { color: blue; } 
    .name { color: red; } 
</style> 

L'esempio sopra farà il colore rosso. Entrambi i selettori sono uguali e pertanto hanno anche la stessa specificità. E poiché il CSS si legge dall'alto verso il basso, prima diciamo che è blu, ma poi lo ignoriamo dicendogli "non importa, rendilo rosso".

---

Esempio 2:

<div class="container"> 
    <div class="name">Dave</div> 
</div> 

<style> 
    #container .name { background-color: blue; } 
    .name { background-color: red; } 
</style> 

L'esempio sopra farà il colore di sfondo blu, anche se blu era in primo luogo perché il selettore è more "specific".

---

eccezione (l'uso di !important):

L'inclusione di !important avrà la precedenza sia la specificità e l'ordine, ma a mio parere, deve essere utilizzato solo se si sta cercando di pasticciare con un codice di terze parti in cui non si ha accesso per modificarlo in altro modo.

---

esterno CSS:

regole di sovrascrittura funzionano allo stesso modo su file CSS esterni. Immagina di metterle in ordine di grandezza, da cima a fondo. I selettori richiamati nei primi file verranno sovrascritti dai selettori di specificità delle stesse in qualsiasi file successivo. Ma la specificità trionferà ancora all'interno dello stesso file o in più file.

---

Come prova:

In Chrome, Firefox, e le versioni moderne di IE (probabilmente troppo Safari), è possibile fare clic destro su qualcosa e fare clic su "Inspect Element". Questo mostrerà l'HTML e qualsiasi CSS applicato. Mentre scorri verso il basso il CSS (di solito a destra), vedrai le cose che sono cancellate, il che significa che sono CSS errati o sovrascritte. Per testare, è possibile modificare i selettori CSS (nel proprio codice o proprio lì nella finestra degli strumenti di sviluppo) per renderli più specifici e vedere se ciò rende poi non-barrato ... ecc. Gioca con questo strumento: è MOLTO utile.