Gerarchia di specificità in CSS | Spiegato
La specificità in CSS determina l'ordinamento dei selettori CSS da applicare a un elemento. Ad esempio, un elemento può essere influenzato da vari stili CSS e quindi sarebbe difficile adattarsi a uno stile. Il concetto di specificità ha facilitato il processo di decisione quale proprietà CSS selezionare per un elemento. Per fare ciò, viene seguita una gerarchia di specificità che definisce un ordine di selettori CSS in base al punteggio di specificità.
Questo articolo fornisce una visione approfondita della gerarchia di specificità con i seguenti risultati di apprendimento:
- Gerarchia di specificità in CSS
- Come calcolare il punteggio della gerarchia della specificità
Gerarchia di specificità in CSS
La gerarchia di specificità è l'ingrediente chiave nella pratica della specificità. La gerarchia di specificità si riferisce alle categorie dei selettori CSS e al loro ordine di esecuzione in CSS. I seguenti quattro gruppi si riferiscono
Stili in linea: La proprietà di stile utilizzata all'interno dell'elemento e la specificità degli stili in linea è maggiore di tutti gli altri gruppi.
Identificatore (ID): L'attributo ID di un elemento e la specificità è un passo dopo gli stili in linea.
Classi, pseudo classi, attributi: Questo gruppo contiene le classi, le classi di pseudo (come: link ,: attivo ,: focus) e altri attributi. Il livello di specificità di questo gruppo è un passo verso il basso dal gruppo di identificatore.
Elementi, pseudo elementi: Questo gruppo contiene elementi (P, H1, Div) e Pseudo Elements (:: prima, :: dopo) . La specificità di questo gruppo è al livello più basso.
Come calcolare il punteggio della gerarchia di specificità
Dietro il concetto di gerarchia di specificità, esiste un calcolo matematico che porta a quantificare la specificità e dare la priorità al selettore CSS in base a quel punteggio. Il punteggio può essere calcolato seguendo il benchmark fornito di seguito.
| Selettore CSS | Punteggio della gerarchia di specificità |
|---|---|
| Stili in linea | 1000 |
| Identificatore (ID) | 100 |
| Classe, pseudo classi, attributi | 10 |
| Elemento, pseudo elemento | 1 |
Esempio 1: selettori CSS
Il seguente codice pratica vari selettori CSS su un singolo elemento per comprendere il processo di gerarchia della specificità in CSS.
Html
Linuxhint! Una valle di tutorial
CSS
Nel codice CSS sopra, tre selettori cercano di modificare il colore di sfondo dell'elemento H3. Il primo selettore utilizza il nome dell'elemento mentre il secondo e il terzo selettore esercita la classe e l'ID dell'elemento H3.
Produzione
Come specificità del id è maggiore del classe e il elemento, Quindi il id verrebbe usato come selettore CSS.
Esempio 2: utilizzando selettori CSS ibridi
Potrebbe esserci un caso in cui devi definire le classi con gli stessi nomi. In tale scenario, i selettori ibridi sono esercitati per identificare in modo univoco un elemento specifico. Il seguente esempio utilizza il id e classe Per creare un selettore ibrido.
Html
Linuxhint! Una valle di tutorial
Tutorial su HTML, CSS, Java, JQuery e JavaScript
Benvenuti in Linuxhint
Un fornitore di contenuti di qualità
Nel codice sopra, due Div's sono creati e ogni div ha H3 con class = "Spec" E p con class = "Spec1". elementi.
CSS
Nel CSS sopra, il #new .la specifica si riferisce all'elemento H3 del div id = "nuovo" mentre il .Spec si riferisce a tutti gli elementi che hanno class = "Spec".
Tenendo presente i calcoli, il "#nuovo ".Spec "e".specifiche " avere il seguente punteggio.
- #nuovo .Spec = 100+10 = 110
- .Spec = 10
Produzione
Dall'output si osserva che il selettore CSS “#Div .specifiche " è stato caricato come la sua specificità è maggiore di ".specifiche ".
Conclusione
La gerarchia di specificità imposta l'ordinamento per i selettori CSS, il selettore con un punteggio di specificità più elevato ha una priorità più elevata rispetto al selettore che ha un punteggio di specificità inferiore. In questo articolo, abbiamo dimostrato il concetto di gerarchia di specificità e descritto le basi di come viene definita la gerarchia di specificità. Gli stili in linea hanno il punteggio di specificità più alto e quindi sono posizionati nella parte superiore della gerarchia della specificità, seguita da ID, classi e elemento. Inoltre, abbiamo anche fornito il metodo per calcolare il punteggio di specificità dei selettori CSS.