Qual è l'ordine di precedenza per i CSS?

Sto cercando di capire perché una delle mie classi CSS sembra sovrascrivere l'altra (e non il contrario)

Qui ho due classi CSS

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

ea mio avviso chiamo

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

Il carattere (l'elemento sovrapposto) si presenta come 10px invece di 20 - qualcuno potrebbe spiegare perché è così?

Esistono diverse regole (applicate in questo ordine):

1. css inline (attributo di stile html) sovrascrive le regole css nel tag di stile e nel file css
2. un selettore più specifico ha la precedenza su uno meno specifico
3. le regole che appaiono più avanti nel codice sovrascrivono le regole precedenti se entrambe hanno la stessa specificità.
4. Una regola CSS con ha !importantsempre la precedenza.

Nel tuo caso vale la regola 3.

Specificità per selettori singoli dal più alto al più basso:

• ids (esempio: #mainseleziona <div id="main">)
• classi (es .: .myclass), selettori di attributo (es .: [href=^https:]) e pseudo-classi (es .: :hover)
• elementi (es .: div) e pseudo-elementi (es .: ::before)

Per confrontare la specificità di due selettori combinati, confrontare il numero di occorrenze di singoli selettori di ciascuno dei gruppi di specificità sopra.

Esempio: confronta #nav ul li a:hovercon#nav ul li.active a::after

• conta il numero di selettori di id: ce n'è uno per ogni ( #nav)
• contare il numero di selettori di classe: ce n'è uno per ciascuno ( :hovere .active)
• contare il numero di selettori di elementi: ci sono 3 ( ul li a) per il primo e 4 per il secondo ( ul li a ::after), quindi il secondo selettore combinato è più specifico.

Un buon articolo sulla specificità del selettore CSS .

Ecco una raccolta dell'ordine di stile CSS in un diagramma, in cui le regole CSS hanno una priorità maggiore e hanno la precedenza sul resto:

Dichiarazione di non responsabilità : io e il mio team abbiamo elaborato questo pezzo insieme a un post sul blog ( https://vecta.io/blog/definitive-guide-to-css-styling-order ) che penso tornerà utile a tutti i front-end sviluppatori.

Quello che stiamo guardando qui si chiama specificità come affermato da Mozilla :

La specificità è il mezzo con cui i browser decidono quali valori di proprietà CSS sono più rilevanti per un elemento e, quindi, verranno applicati. La specificità si basa sulle regole di corrispondenza che sono composte da diversi tipi di selettori CSS.

La specificità è un peso che viene applicato a una data dichiarazione CSS, determinato dal numero di ciascun tipo di selettore nel selettore corrispondente. Quando più dichiarazioni hanno la stessa specificità, l'ultima dichiarazione trovata nel CSS viene applicata all'elemento. La specificità si applica solo quando lo stesso elemento è preso di mira da più dichiarazioni. Secondo le regole CSS, gli elementi mirati direttamente avranno sempre la precedenza sulle regole che un elemento eredita dal suo antenato.

Mi piace la spiegazione 0-0-0 su https://specifishity.com :

Abbastanza descrittivo il quadro della !importantdirettiva! Ma a volte è l'unico modo per sovrascrivere l' styleattributo inline . Quindi è una buona pratica cercare di evitare entrambi.

Prima di tutto, in base alla tua @extenddirettiva, sembra che tu non stia usando puro CSS, ma un preprocessore come SASS os Stylus.

Ora, quando parliamo di "ordine di precedenza" nei CSS, c'è una regola generale coinvolta: qualsiasi regola impostata dopo altre regole (in modo dall'alto verso il basso) viene applicata. Nel tuo caso, solo specificando .smallboxdopo.smallbox-paysummary potresti cambiare la precedenza delle tue regole.

Tuttavia, se vuoi andare un po 'oltre, ti suggerisco di leggere: CSS cascade W3C . Scoprirai che la precedenza di una regola si basa su:

1. Il tipo di supporto corrente;
2. Importanza;
3. Origine;
4. Specificità del selettore e infine la nostra ben nota regola:
5. Quale è quest'ultimo specificato.

AS è lo stato in W3: W3 Cascade CSS

l'ordine in cui vengono applicati fogli di stile diversi è il seguente (citazione dalla sezione a cascata W3):

1. dichiarazioni del programma utente

2. dichiarazioni normali dell'utente

3. dichiarazioni normali dell'autore

4. autore di importanti dichiarazioni

5. dichiarazioni importanti dell'utente

Maggiori informazioni su questo nel documento W3 di riferimento

L'ordine in cui le classi appaiono nell'elemento html non ha importanza, ciò che conta è l'ordine in cui i blocchi appaiono nel foglio di stile.

Nel tuo caso .smallbox-paysummaryviene definita dopo da .smallboxqui la precedenza di 10px.

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)

CSS in linea (attributo di stile html) sovrascrive le regole css nel tag di stile e nel file css

Un selettore più specifico ha la precedenza su uno meno specifico.

Le regole che appaiono più avanti nel codice sovrascrivono le regole precedenti se entrambe hanno la stessa specificità.

È anche importante notare che quando hai due stili su un elemento HTML con uguale precedenza, il browser darà la precedenza agli stili che sono stati scritti sul DOM per ultimo ... quindi se nel DOM:

<html>
<head>
<style>.container-ext { width: 100%; }</style>
<style>.container { width: 50px; }</style>
</head>
<body>
<div class="container container-ext">Hello World</div>
</body>

... la larghezza del div sarà 50px