In CSS werden verschiedene Eigenschaften verwendet, in denen einige Eigenschaften universell sind und einige für verschiedene Selektoren verwendet werden. Wenn Benutzer jedoch die Elemente basierend auf ihrer Position in einer Gruppe stylen möchten, z. B. eine gleichmäßige oder seltsame Position, CSS “: n-Child ()Der Selektor wird verwendet, der definiert, ob das Element gerade oder ungerade ist.

Dieser Beitrag erklärt die Methode zum Styling der geraden und seltsamen Elemente in CSS.

Wie man gleiche und seltsame Elemente stymt?

Die Syntax zum Styling der geraden oder ungeraden Elemente wird unten erwähnt:

li: nth-Kind (ungerade/gleich)
CSS -Eigenschaft

Versuchen Sie nun das angegebene Verfahren, um die gleichmäßigen und seltsamen Elemente in einem „DIV“.

Schritt 1: Überschrift einfügen

Fügen Sie eine Überschrift mit Hilfe des "

”Tag und fügen Sie den Text zwischen dem Überschriften -Tag ein und fügen Sie den Text ein. Der "

”Definiert die Stufe 1.

Schritt 2: Erstellen Sie ein "Div" -Element

Ein ... kreieren "divContainer mit Hilfe der “”Element und zuweisen Sie es eine“Klasse”Attribut mit einem bestimmten Namen.

Schritt 3: Liste hinzufügen

Hinzufügen "

”Tag, um den Element aufzulisten:

LinuxHint Content Creators

Zwietracht

HTML/CSS

JavaScript

Git

Docker

Fenster

Ausgang

Schritt 4: Stilliste

Zugang nun auf die “div”Element Verwenden der zugewiesenen Klasse“.Stilliste”Und wenden Sie die folgenden Eigenschaften an:

.Stilliste
Grenze: 5px fester RGB (17, 241, 241);
Rand: 50px;
Polsterung: 20px;

Hier:

• “Grenze”Definiert eine Grenze oder einen Umriss für ein Element.
• “Rand”Zuweist einen Raum um die definierte Grenze des Elements.
• “Polsterung”Gibt den Raum innerhalb der Grenze an:

Schritt 5: Style Seltsame Elemente

Um die seltsamen Elemente im Container zu stylen, greifen Sie zunächst auf die alten Elemente zu, indem Sie die „verwenden“li: nth-Kind (ungerade)”. Der "n-Kind ()"Ist ein AuswahlN”Kann ein Element oder ein Schlüsselwort (ungerade oder gleichmäßig) sein. Wenden Sie dann die folgenden Eigenschaften an:

li: nth-Kind (ungerade)
Schriftgröße: 20px;
Hintergrund: RGB (12, 189, 233);
Farbe weiß;

Hier das "Schriftgröße"Gibt die Größe der Schriftart" an "Hintergrund"Legt die Farbe des Hintergrunds fest und"FarbeDie Eigenschaft wird verwendet, um die Farbe des Textes anzugeben.

Es kann beobachtet werden, dass die merkwürdigen Elemente unter Verwendung der CSS -Eigenschaften bezeichnet wurden:

Schritt 7: Stilin sogar Elemente

Um die gleichmäßigen Elemente zu stylen, greifen Sie auf die gleichmäßigen Elemente zu, indem Sie die „verwenden“li: nth-Kind (sogar)”. Wenden Sie dann die CSS -Eigenschaften gemäß Ihrer Präferenz an. Zum Beispiel die “Schriftgröße","Hintergrund", Und "Farbe" werden verwendet:

li: nth-Kind (sogar)
Schriftgröße: 20px;
Hintergrund: RGB (167, 235, 10);
Farbe: RGB (238, 15, 15);

Ausgang

Darüber hinaus kann der Benutzer CSS sowohl auf gleichmäßige als auch auf seltsame Elemente anwenden, um sie zu stylen:

Wir haben dir beigebracht, wie man sogar seltsame Elemente stymt.

Abschluss

Um die gleichmäßigen und seltsamen Elemente zu stylen, erstellen Sie eine “”Und fügen Sie Elemente in Form einer Liste mit der" hinzu "

" Schild. Greifen Sie dann auf die ausgeglichenen oder merkwürdigen Elemente zu, indem Sie die “nutzen“li: n-Kind ()Und wo die “n-Kind ()”Selector vergleicht jedes einzelne Element eines n-ten Kindes mit seinem Elternteil. Der "N”Kann ein Schlüsselwort oder eine Nummer sein, egal ob es gerade oder ungerade ist. Wenden Sie dann CSS -Eigenschaften an, wie zSchriftgröße","Farbe", Und "Hintergrund”Zum Styling. Dieser Beitrag hat die einfachste Methode zum Styling der geraden oder merkwürdigen Elemente gezeigt.