Selettori CSS
Ti stai chiedendo come funzionano i selettori CSS? Nessun problema! Questo articolo dimostrerà una comprensione dettagliata dei selettori CSS con esempi. Cominciamo prima con la sintassi:
Sintassi
La sintassi per la scrittura di un selettore CSS è mostrata nel frammento di seguito:
Qui "P" è il selettore che convertirà il colore del paragrafo in verde.
Tipi di selettori CSS
CSS offre vari tipi di selettori che ogni tipo possiede funzionalità diverse. Questo articolo coprirà i seguenti tipi:
- Selettore degli elementi
- Selettore di classe
- Selettore ID
- raggruppamento del selettore
- Selettore universale
Selettore degli elementi
In CSS, il Selettore degli elementi è usato per colpire gli elementi HTML in base al loro nome.
Ad esempio, il seguente codice implementerà il colore di sfondo nero con il colore del testo verde a tutti i paragrafi usando il selettore degli elementi:
Selettori
Sviluppo del frontend
Sviluppo di backend
L'output di seguito è di seguito dimostrerà il funzionamento del selettore degli elementi CSS:
Selettore di classe
Il selettore di classe CSS viene utilizzato per colpire gli elementi HTML con nome di classe specifico. La sintassi del selettore di classe include un periodo (.) seguito dal nome della classe.
.className css-property: valueNella sintassi sopra "ClassName" è un selettore di classe.
Consideriamo un esempio che colpirà l'intestazione e gli elementi del paragrafo utilizzando il selettore di classe come mostrato nel codice seguente:
Selettori
Sviluppo del frontend
Sviluppo di backend
In questo esempio ".Style ”è un selettore di classe che specifica alcune proprietà. Nella sezione del corpo
, ed entrambi
Gli elementi hanno il nome di classe "stile".
Lo snippet seguente mostrerà l'output del frammento di codice sopra:
Selettore ID
In CSS, il Selettore ID bersaglio gli elementi HTML in base all'attributo ID. Il segno hash (#) seguito dall'ID dell'elemento viene utilizzato per il Selettore ID.
Consideriamo un esempio che implementerà lo stile specificato sull'elemento HTML con ID = "Style" come mostrato di seguito:
Selettori
Sviluppo del frontend
Sviluppo di backend
Il selettore ID implementato sul file
L'elemento fornirà il seguente output:
Ora, devi pensare qual è la differenza tra il selettore ID e il selettore di classe?
ID è un identificatore univoco che significa che una volta utilizzato l'ID per un elemento lo stesso ID non può essere utilizzato altrove all'interno dello stesso documento. Se utilizziamo lo stesso ID due volte in un documento, il CSS applicherà lo stile all'ultimo. Mentre le lezioni sono grandi classificatori, non sono unici in natura.
Raggruppamento del selettore
Il selettore di raggruppamento target più elementi con lo stesso stile. Il selettore di raggruppamento utilizzato ", tra più selettori.
Consideriamo un esempio che implementerà lo stesso stile ai più elementi mostrati nel seguente frammento:
Selettori
Sviluppo del frontend
Sviluppo di backend
Questo è un piè di pagina
Il seguente output verificherà che il selettore di raggruppamento abbia applicato lo stesso stile a
ed elementi:
Selettore universale
IL Selettore universale implementa lo stile di tutti gli elementi del documento. Un segno "*" viene utilizzato per implementare il selettore universale. Ad esempio, il seguente codice applicherà lo stile dato su tutti gli elementi HTML:
Selettori
Sviluppo del frontend
Sviluppo di backend
Questo è un piè di pagina
Il codice sopra implementerà l'intero documento e, di conseguenza, otterremo il seguente output:
Conclusione
I selettori CSS trovano/target gli elementi HTML e implementano alcune proprietà di styling su di essi. Esistono numerosi tipi di selettori CSS, questo articolo ha trattato alcuni di essi come il selettore di elementi e il selettore di classe in base al nome dell'elemento e al nome della classe dell'elemento rispettivamente. Ogni tipo esegue funzionalità diverse come ID Selector implementa alcune azioni in base all'ID dell'elemento, a raggruppando il target di selezione.