Questa risposta è per principianti assoluti. Se desideri una panoramica di questa risposta, leggi la mia seconda risposta.
Il Cascading è il processo di combinazione di diversi fogli di stile e risoluzione dei conflitti tra diverse regole CSS e dichiarazioni quando più di una regola si applica a un determinato elemento . Perché, come probabilmente già saprai, una dichiarazione per una determinata proprietà di stile come la dimensione del carattere può apparire in diversi fogli di stile e anche più volte all'interno di un singolo foglio di stile.
Per capire il collegamento a cascata è necessario iniziare con la fase di analisi CSS perché nella fase di analisi il primo passaggio è risolvere le dichiarazioni CSS in conflitto e il secondo passaggio è elaborare i valori CSS finali.
Ora i CSS possono anche provenire da fonti diverse. Il più comune è il CSS che scriviamo noi sviluppatori. Queste dichiarazioni che mettiamo nei nostri fogli di stile sono chiamate dichiarazioni dell'autore. Un'altra fonte può essere la dichiarazione dell'utente, che è CSS proveniente dall'utente. Ad esempio, quando l'utente modifica la dimensione del carattere predefinito nel browser, questo è il CSS dell'utente e, ultimo ma non meno importante, ci sono le dichiarazioni del browser predefinito.
Ad esempio, se inseriamo un tag di ancoraggio nel nostro HTML per un collegamento e poi non lo stile affatto, di solito verrà visualizzato con testo blu e sottolineato, a destra. Si chiama CSS dell'agente utente perché è impostato dal browser. Quindi la cascata combina le dichiarazioni CSS provenienti da tutte queste diverse fonti, ma come fa la cascata a risolvere effettivamente i conflitti quando si applica più di una regola?
Bene, quello che fa è guardare all'importanza, alla specificità del selettore e all'ordine di origine delle dichiarazioni in conflitto per determinare quale ha la precedenza, ed ecco come funziona. Prima di tutto, la cascata inizia dando le dichiarazioni contrastanti di diversa importanza in base a dove sono dichiarate sulla loro fonte. Le dichiarazioni più importanti sono dichiarazioni utente contrassegnate con la parola chiave important.
Le seconde dichiarazioni più importanti sono le dichiarazioni dell'autore contrassegnate da importante. Terzo, le normali dichiarazioni dell'autore, quindi le normali dichiarazioni dell'utente e infine quelle meno importanti sono le dichiarazioni del browser predefinito, il che in realtà ha molto senso che possiamo facilmente sovrascrivere queste dichiarazioni provenienti per impostazione predefinita dal browser.
Ora molte volte avremo solo un mucchio di regole in conflitto nei nostri fogli di stile dell'autore senza alcuna parola chiave importante. Questo è in realtà lo scenario più comune e in questo caso tutte le dichiarazioni hanno la stessa identica importanza. Ora, cosa succede in questo caso? Quello che fa la cascata se questo è il caso è calcolare e confrontare le specificità dei selettori di dichiarazione, ed è così che funziona.
Gli stili inline hanno la specificità più alta seguita da ID, quindi classi, pseudo-classi e selettori di attributi e infine l'elemento meno specifico e il selettore di pseudo-elementi. Quindi, quando abbiamo dichiarazioni contrastanti con la stessa importanza che abbiamo visto nell'ultima diapositiva, calcoliamo la loro specificità del selettore in base alle priorità che ti ho appena mostrato, ma vediamo come calcoliamo effettivamente le specificità con un piccolo esempio, è sempre meglio, giusto.
Dall'esempio precedente, tutte queste dichiarazioni hanno la stessa importanza, perché sono tutte dichiarazioni dell'autore. Quindi calcoliamo le loro specificità del selettore per scoprire se il colore di sfondo sarà blu, verde, viola o giallo, ed è così che lo facciamo. La specificità in realtà non è solo un numero, ma un numero per ciascuna delle quattro categorie che ti ho mostrato prima. Stili, ID, classi, pseudo-elementi e attributi incorporati e infine elementi e per ciascuno di questi contiamo il numero di occorrenze nel selettore.
Quindi qui nel selettore uno, ovviamente non abbiamo stili in linea, perché uno stile in linea deve essere scritto nell'HTML, che non è il caso qui, quindi è uno zero. Anche qui non abbiamo ID, quindi è di nuovo uno zero, ma abbiamo una classe, la classe dei pulsanti. Quindi per la categoria delle classi, ne abbiamo uno e, infine, non c'è un selettore di elementi qui, quindi zero anche per quello, e basta. La specificità del selettore è zero, zero, uno, zero.
Ora confrontiamolo con gli altri. Anche il prossimo non è uno stile in linea, quindi zero per il primo. Ora qui abbiamo effettivamente un selettore ID per l'ID di navigazione, giusto, quindi è uno per l'ID. Abbiamo anche due classi pull right e button, quindi sono due per la categoria classes e, infine, ci sono anche due selettori di elementi qui. L'elemento nav e l'elemento div, il che significa che sono anche due per la categoria degli elementi. Quindi, alla fine, la specificità del selettore è zero, uno, due, due, che in realtà è un selettore altamente specifico.
Il selettore numero tre è molto semplice. È solo un selettore di elementi e quindi la specificità è zero, zero, zero, uno.
Adesso l'ultimo, il selettore numero quattro. Per prima cosa abbiamo di nuovo l'ID di navigazione, quindi è uno per l'ID. Successivamente, abbiamo una classe, la classe del pulsante e anche una pseudo-classe, che è hover, il che la rende due per la categoria delle classi in totale. Poiché esiste anche un selettore di elementi, la specificità finale è zero, uno, due, uno.
Ora sappiamo come utilizziamo effettivamente questi numeri per scoprire quale dei selettori si applica. Iniziamo a guardare i numeri da sinistra a destra iniziando dalla categoria più specifica, gli stili in linea. Se c'è un selettore con uno per gli stili in linea, vince contro tutti gli altri selettori, perché questa è la categoria più specifica. Bene, questo non è il caso qui, quindi passiamo agli ID. Vediamo che i selettori due e quattro hanno uno qui mentre gli altri hanno zero quindi quelli con zero sono fuori dal gioco perché sono meno specifici dei selettori due e quattro quelli con gli ID.
Ora poiché entrambi i selettori ne hanno uno nella categoria ID, dobbiamo andare avanti e controllare le classi. Entrambi hanno un due in questa categoria è ancora un pareggio tra loro, e infine, nella categoria degli elementi, il selettore due ha un due mentre il selettore quattro ne ha solo uno e quindi abbiamo un vincitore qui. Il selettore numero due è il selettore più specifico di tutti e quindi darà al nostro pulsante uno sfondo verde.34 Il valore della dichiarazione vincente è chiamato valore a cascata perché è il risultato della cascata.
Quindi iniziamo con un gruppo di valori dichiarati in questo caso blu, verde, viola e giallo, uno di essi vince e diventa il valore a cascata, che nel nostro esempio è verde.
Ora immagina che anche il settore quattro avesse due elementi, quindi entrambi i selettori due e quattro avrebbero la stessa identica specificità, giusto. Quindi cosa succede in questo caso e ti prometto che ora è quasi finita, ok. Ebbene, se c'è ancora un pareggio a questo punto, l'ultima dichiarazione CSS scritta nel codice è quella che verrà applicata. Quindi, ancora una volta, se tutto è uguale, se tutti i selettori di dichiarazioni hanno la stessa specificità, allora è semplicemente l'ultima dichiarazione che verrà utilizzata per modellare l'elemento selezionato.