Specificità in CSS

I CSS possono essere applicati a qualsiasi elemento in più modi (in linea, interno ed esterno). Cosa succede se applichiamo stili allo stesso elemento con mezzi diversi (usando in linea, usando ID o classe, ecc.)? In tal caso, il fenomeno della specificità CSS entra in pratica e sceglie il selettore CSS che ha un valore di specificità più alto. Il concetto di specificità è come la precedenza dell'operatore nei linguaggi di programmazione.

Tenendo conto dell'importanza della specificità, questa guida dimostra brevemente il funzionamento e l'uso della specificità nel CSS.

1. Come funziona la specificità CSS
2. Valore di specificità dei selettori CSS

Come funziona la specificità in CSS

Il funzionamento della specificità dipende dai selettori CSS o dal tipo di CSS che stai utilizzando. Questa sezione considera il confronto di specificità nei seguenti modi:

• CSS in linea, CSS interno e CSS esterni
• Selettori CSS (ID, classe, lezioni di pseudo, elementi pseudo, ecc.)

Il foglio di stile può essere in linea, interno o esterno e il seguente è il livello di specificità di questi fogli di stile.

Dall'equazione di cui sopra, si è concluso che il CSS in linea ha la massima specificità rispetto al CSS interno ed esterno.

Ora, esploriamo come vengono raccolti gli stili se sono usati più selettori CSS per lo stesso elemento. La specificità di vari selettori CSS è definita dalla seguente equazione.

Fino ad ora, il confronto teorico è stato ritirato. Facciamo qualche confronto quantitativo del punteggio di specificità e questo punteggio di specificità viene calcolato dai browser nel modo seguente.

Per fare ciò, quelli, centinaia e migliaia di concetti di conteggio vengono applicati sui selettori CSS per ottenere un valore specifico. In modo tale che, il selettore di minimo specificità (elemento) sia assegnato 1 e il selettore di specificità più elevato (inline) è assegnato 1000. La tabella seguente si riferisce al punteggio di specificità di vari selettori CSS.

Abbiamo praticato alcuni esempi che vengono ritirati dal concetto fornito nella tabella sopra.

Con l'aiuto delle informazioni fornite nelle tabelle di cui sopra, avresti capito meglio il concetto di specificità in CSS. Paviamoli usando i seguenti esempi

Esempio 1: utilizzando più selettori CSS per un elemento

Questo esempio pratica vari selettori CSS per modellare l'elemento "P".

Html

Usando il concetto di specificità

Nel codice HTML sopra, il paragrafo è assegnato id = "one" e class = "Spec".

CSS

Nel css sopra, il "Classe", "Id" e "Element" sono usati come selettori CSS per "P". Ogni selettore CSS intende cambiare il colore di sfondo del "P" elemento.

Produzione

Dall'output, si osserva che il colore di sfondo è cielo-blu che è stato impostato dal id = "uno" dell'elemento "p".

Esempio 2: usando selettori della stessa specificità

Esiste la possibilità che un elemento venga affrontato dai selettori CSS che hanno lo stesso punteggio di specificità. In tal caso, viene considerata la presenza del selettore CSS e il selettore successivo viene scelto per lo styling.

Questo esempio dimostra lo stesso scenario utilizzando il seguente codice.

Html

Usando i selettori che hanno la stessa specificità

CSS

Nel codice CSS sopra, vengono utilizzati due selettori ID con stili diversi. #Spec che si verifica in precedenza ha solo proprietà del colore di sfondo mentre il #Spec Si verifica più tardi ha più proprietà CSS.

Produzione

Dall'output, si osserva che il id = "Spec" Il selettore che si verifica lateralmente viene selezionato e le proprietà da esso contenute sono applicate all'elemento paragrafo.

Conclusione

Ogni volta che più selettori CSS cercano di influenzare un elemento, il fenomeno della specificità decide quale stile deve essere applicato. La specificità in CSS ha il ruolo chiave poiché i fogli di stile complessi possono contenere più selettori per ciascun elemento. Questo articolo dimostra il concetto di specificità in CSS. Inoltre, sapresti anche come viene calcolato il punteggio di specificità di un selettore CSS. Con l'aiuto di ciò, saresti in grado di calcolare il punteggio della specificità prima di utilizzare qualsiasi selettore CSS.