In CSS, ci sono varie proprietà utilizzate in cui alcune proprietà sono universali e alcune sono usate su vari selettori. Tuttavia, se gli utenti vogliono modellare gli elementi in base alla loro posizione in un gruppo, come una posizione uniforme o dispari, CSS ": nth-child ()"Viene utilizzato il selettore che definisce se l'elemento è uniforme o dispari.

Questo post spiegherà il metodo per lo styling degli elementi pari e dispari in CSS.

Come modellare elementi pari e strani?

La sintassi per lo styling degli elementi pari o dispari è menzionata di seguito:

li: nth-child (odd/anche)
Proprietà CSS

Ora, prova la procedura data per modellare gli elementi pari e strani in un contenitore "div".

Passaggio 1: inserire l'intestazione

Aggiungi una voce con l'aiuto di "

"Tag e inserire il testo tra il tag di intestazione. IL "

"Definisce il livello uno intestazione.

Passaggio 2: crea un elemento "div"

Creare un "div"Container con l'aiuto del""Elemento e assegnarlo un"classe"Attributo con un nome specifico.

Passaggio 3: Aggiungi elenco

Aggiungere "

"Tag per elencare l'elemento:

Creatori di contenuti Linuxhint

Discordia

HTML/CSS

JavaScript

Idiota

Docker

finestre

Produzione

Passaggio 4: elenco di stile

Ora, accedi al "div"Elemento usando la classe assegnata".elenco di stile"E applica le proprietà di seguito elencate:

.stile-elenco
Bordo: 5px solido RGB (17, 241, 241);
Margine: 50px;
imbottitura: 20px;

Qui:

• "confine"Definisce un limite o un profilo per un elemento.
• "margine"Assegna uno spazio attorno al limite definito dell'elemento.
• "imbottitura"Specifica lo spazio all'interno del bordo:

Passaggio 5: Stile Elementi dispari

Per modellare gli elementi dispari nel contenitore, prima, accedi ai vecchi elementi utilizzando il “li: nth-child (dispari)". IL "nth-child ()"È un selettore che corrisponde a ogni elemento di nth-child del suo genitore, dove"N"Può essere un elemento numero o parola chiave (dispari o uniforme). Quindi, applica le proprietà sotto l'elenco:

li: nth-child (odd)
Font-size: 20px;
Background: RGB (12, 189, 233);
colore bianco;

Qui, il "dimensione del font"Specifica la dimensione del carattere,"sfondo"Imposta il colore dello sfondo e"colore"La proprietà viene utilizzata per specificare il colore del testo.

Si può osservare che gli elementi dispari sono stati disegnati utilizzando le proprietà CSS:

Passaggio 7: stile anche elementi

Per modellare gli elementi pari, accedi agli elementi pari utilizzando il "li: nth-child (pari)". Quindi, applica le proprietà CSS in base alle tue preferenze. Ad esempio, il “dimensione del font","sfondo", E "colore" sono usati:

li: nth-child (anche)
Font-size: 20px;
Background: RGB (167, 235, 10);
Colore: RGB (238, 15, 15);

Produzione

Inoltre, l'utente può applicare CSS su elementi pari e dispari per modellarli:

Ti abbiamo insegnato come modellare anche elementi strani.

Conclusione

Per modellare gli elementi pari e strani, crea un ""E aggiungi elementi sotto forma di un elenco usando il"

"Tag. Quindi, accedi agli elementi pari o dispari utilizzando il "li: nth-child ()"E dove il"nth-child ()"Il selettore confronta ogni elemento di un figlio di nonno con il suo genitore. IL "N"Può essere una parola chiave o un numero, sia uniforme o dispari. Quindi, applica proprietà CSS come "dimensione del font","colore", E "sfondo"Per lo styling. Questo post ha dimostrato il metodo più semplice per lo styling degli elementi pari o dispari.