CSS Cascading


Esempio

Cascading e specificità sono usati insieme per determinare il valore finale di una proprietà di stile CSS. Definiscono inoltre i meccanismi per risolvere i conflitti nelle serie di regole CSS.

Ordine di caricamento CSS

Gli stili sono letti dalle seguenti fonti, in questo ordine:

  1. Foglio di stile User Agent (gli stili forniti dal fornitore del browser)
  2. Foglio di stile dell'utente (Lo stile aggiuntivo che un utente ha impostato sul suo browser)
  3. Stili di autore (qui autore indica il creatore della pagina web / sito Web)
    • Forse uno o più file .css
    • Nell'elemento <style> del documento HTML
  4. Stili in linea (nell'attributo style su un elemento HTML)

Il browser cercherà gli stili corrispondenti durante il rendering di un elemento.

Come vengono risolti i conflitti?

Quando solo una serie di regole CSS sta tentando di impostare uno stile per un elemento, non vi è alcun conflitto e tale serie di regole viene utilizzata.

Quando vengono trovati più set di regole con impostazioni in conflitto, prima le regole di specificità e quindi le regole a cascata vengono utilizzate per determinare quale stile utilizzare.

Esempio 1 - Regole di specificità

.mystyle { color: blue; }  /* specificity: 0, 0, 1, 0 */
div { color: red; }        /* specificity: 0, 0, 0, 1 */
<div class="mystyle">Hello World</div>

Di che colore sarà il testo? (passa il mouse per vedere la risposta)

blu

Prima vengono applicate le regole di specificità e quella con la specificità più alta "vince".

Esempio 2 - Regole in cascata con selettori identici

File css esterno

.class {
  background: #FFF;
}

Css interno (nel file HTML)

<style>
.class {
  background: #000;
}
<style>

In questo caso, in cui si hanno selettori identici, la cascata si attiva e determina che l'ultimo caricato "vince".

Esempio 3: regole a cascata dopo le regole di specificità

body > .mystyle { background-color: blue; }   /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; }  /* specificity: 0, 0, 1, 1 */
<body class="otherstyle">
  <div class="mystyle">Hello World</div>
</body>

Di che colore sarà lo sfondo?

rosso

Dopo aver applicato le regole di specificità, c'è ancora un conflitto tra blu e rosso, quindi le regole a cascata vengono applicate in aggiunta alle regole di specificità. Il collegamento in cascata esamina l'ordine di caricamento delle regole, sia all'interno dello stesso file .css che nella raccolta di fonti di stile. L'ultimo caricato sovrascrive quelli precedenti. In questo caso, la regola del " .otherstyle > div " vince ".

Un'ultima nota

  • La specificità del selettore ha sempre la precedenza.
  • Legami di rottura dell'ordine di fogli di stile.
  • Gli stili in linea vincono tutto.