W CSS wykorzystywane są różne właściwości, w których niektóre właściwości są uniwersalne, a niektóre są używane na różnych selektorach. Jeśli jednak użytkownicy chcą stylizować elementy na podstawie ich pozycji w grupie, takiej jak pozycja nawet lub dziwna, CSS ”: nth-child ()„Wykorzystuje się selektor, który określa, czy element jest równy, czy dziwny.

Ten post wyjaśni metodę stylizacji elementów równych i dziwnych w CSS.

Jak stylizować równe i dziwne elementy?

Składnia stylizacji elementów równych lub dziwnych jest wspomniana poniżej:

li: nth-child (dziwne/nawet)
Nieruchomość CSS

Teraz wypróbuj podaną procedurę, aby stylizować równomierne i dziwne elementy w pojemniku „Div”.

Krok 1: Wstaw nagłówek

Dodaj nagłówek z pomocą „

„Tag i wstaw tekst między znacznikiem nagłówka. „„

”Definiuje nagłówek poziomu pierwszego.

Krok 2: Utwórz element „div”

Stwórz "div”Pojemnik z pomocą„”Element i przypisz go„klasa”Atrybut o określonej nazwie.

Krok 3: Dodaj listę

Dodać "

„Tag, aby wymienić element:

Linuxhint Content Creatorzy

Niezgoda

HTML/CSS

JavaScript

Git

Doker

Okna

Wyjście

Krok 4: Lista stylów

Teraz uzyskaj dostęp do „div”Element za pomocą przypisanej klasy„.Lista stylów”I zastosuj poniżej listy nieruchomości:

.Lista stylów
granica: 5px Solid RGB (17, 241, 241);
Margines: 50px;
Wyściółka: 20px;

Tutaj:

• "granica”Definiuje granicę lub zarys elementu.
• "margines„Przydziela przestrzeń wokół zdefiniowanej granicy elementu.
• "wyściółka”Określa przestrzeń wewnątrz granicy:

Krok 5: Stylowe elementy

Aby stylizować dziwne elementy w pojemniku, najpierw uzyskać dostęp do starych elementów, wykorzystując „Li: Nth-Child (nieparzyste)". „„nth-Child ()”To selektor, który pasuje do każdego elementu NTH-Child swojego rodzica, gdzie„N”Może być liczbą lub słowem kluczowym (nieparzystym lub równym) elementem. Następnie zastosuj nieruchomości poniżej na liście:

li: nth-child (nieparzyste)
Rozmiar czcionki: 20px;
Tło: RGB (12, 189, 233);
kolor biały;

Tutaj "rozmiar czcionki”Określa rozmiar czcionki”tło”Ustawia kolor tła i„kolor„Właściwość służy do określenia koloru tekstu.

Można zauważyć, że nieparzyste elementy zostały stylizowane przy użyciu właściwości CSS:

Krok 7: Style nawet elementy

Aby stylizować równomierne elementy, dostęp do równych elementów, wykorzystując „Li: Nth-Child (nawet)". Następnie zastosuj właściwości CSS zgodnie z preferencjami. Na przykład „„rozmiar czcionki”,„tło", I "kolor" są używane:

li: nth-child (nawet)
Rozmiar czcionki: 20px;
Tło: RGB (167, 235, 10);
Kolor: RGB (238, 15, 15);

Wyjście

Ponadto użytkownik może zastosować CSS zarówno na elementach równych, jak i nieparzystych, aby je stylizować:

Nauczyliśmy cię, jak stylizować nawet dziwne elementy.

Wniosek

Aby stylizować równe i dziwne elementy, stwórz „”I dodaj elementy w formie listy za pomocą„

”Tag. Następnie uzyskaj dostęp do elementów równych lub dziwnych, wykorzystując „LI: NTH-Child ()”I gdzie„nth-Child ()”Selektor porównuje każdy element n-and-dziecko z jego rodzicem. „„N”Może być słowem kluczowym lub liczbą, niezależnie od tego, czy jest to równe, czy dziwne. Następnie zastosuj właściwości CSS, takie jak „rozmiar czcionki”,„kolor", I "tło„Do stylizacji. Ten post wykazał najłatwiejszą metodę stylizacji elementów równych lub dziwnych.