Qual è la differenza tra classe e id del selettore CSS? id e utilizzo della classe in HTML

Qual è la differenza tra classe e id del selettore CSS? id e utilizzo della classe in HTML

Chen Weiliang si è recentemente dedicato all'ottimizzazione SEO del tema WordPress del sito web.

Sebbene abbia già appreso alcune conoscenze di base di HTML e CSS, ma non lo utilizzo da un po', in particolare l'utilizzo della parte CSS, è facile dimenticarlo.

Quindi, registra e riepiloga qui la differenza e l'utilizzo dell'ID selettore CSS e della classe:

• id corrisponde a #div
• la classe corrisponde a .div

La differenza tra id e classe

descrizione dell'identità

• id è un tag fisso, che viene utilizzato per definire lo stile più grande nella pagina web, che è definito sotto forma di #div
• Ad esempio: divisione di colonne, alto, corpo, basso, ecc...
• Viene utilizzato per definire un elemento specifico, che può apparire solo una volta per pagina e non può essere richiamato ripetutamente.

descrizione della classe

• Class è un gruppo di stili, utilizzato per definire gli stili dettagliati nella pagina Web. È definito sotto forma di .div e può essere ripetuto.
• Ad esempio: un menu specifico, una riga di testo, ecc...
• Nella stessa pagina, può essere chiamato ripetutamente da più elementi

Il selettore div stesso non ha proprietà e, definendo il suo CSS, controlla alcuni layout come la larghezza, l'altezza, il colore di sfondo e la dimensione del testo del div.

I tipici siti web di e-commerce e le pagine web HTML generate dai programmi di creazione di siti web utilizzano i CSS per realizzare il layout della pagina.

Che cos'è un selettore?

La definizione di ogni stile CSS è composta da 2 parti:

选择器 {样式}

• La parte prima di {} è il "selettore".
• Il "selettore" indica lo "stile" di {} a cui agisce.
• Cioè, su quale elemento della pagina web funziona questo "stile"?

esempio di codice

Ecco come selezionare e modellare un elemento class="sidebar":

.sidebar
{ 
background-color:black;
}

Ecco come selezionare e modellare un elemento con id="footer":

#footer
{ 
background-color:black;
}