Selektory w CSS są zasadami, które mają wzór elementów. Na podstawie tych wzorców elementy są wybierane przez przeglądarkę i dostosowywane do stylów. W niektórych przypadkach konieczne jest stylizowanie elementów posiadających określony element nadrzędny. Na przykład, jeśli istnieje wiele elementów „” przypisanych do tej samej klasy i wymagane jest stylizowanie „div” o „

”Tag. W takich przypadkach „:ma()„Używana jest selektor nadrzędny pseudoklasa.

Ten post opisuje:

• Jak stylizować element nadrzędny, określając jego elementy dziecięce?
• Jak wybrać wszystkie elementy dziecięce?
• Jak wybrać wszystkie bezpośrednie elementy dzieci?

Jak stylizować element nadrzędny, określając jego elementy dziecięce?

Najpierw utwórz plik HTML o dwóch elementach „Div” w następujący sposób:

• Dodaj dwa „„Elementy z tą samą klasą”Parent-Div".
• Pierwszy zawiera dwa „

  " elementy.

• Drugi element „” zawiera „

  " I "

  ”:

Cześć

świat

Cześć

Mam tag „H1”

Jeśli jest to wymagane do stylizowania elementu „” o „

„Element, następnie możemy dostosować styl elementu nadrzędnego, trzymając dziecko. W tym celu możemy skorzystać z „:ma()”Selektor.

Z obu elementów „” wybierz ten, który zawiera „

„Element za pomocą„.Nazwa klas: ma (nazwa dziecka)”:

.rodzic-DIV: ma (h1)
kolor tła: #103e6d;
Kolor: Morda;
szerokość: 150px;
Wysokość: 150px;
Radiusz graniczny: 50%;
Text-Align: Center;

Tutaj zastosowaliśmy następujące właściwości CSS na elemencie nadrzędnym:

• "kolor tła”Służy do określenia koloru tła elementu.
• "kolor”Określa kolor tekstu elementu.
• "szerokość”Służy do zdefiniowania szerokości elementu.
• "wysokość”Określa wysokość elementu.
• "Radiusz graniczny”Właściwość służy do ustawienia zaokrąglonych zakątków elementu.
• "tekst-align”Określa wyrównanie tekstu.

Wyjście

Jak wybrać wszystkie elementy dziecięce?

Aby wybrać element dziecka za pomocą selektora nadrzędnego, przejdź przez podany przykład.

Przykład

Zaimplementuj następujące kroki, aby utworzyć stronę HTML:

• Dodaj element DIV, który zawiera dwa „

  ”Tagi i„„Tag ma klasę”Dziecko".

• Dziecko "div„Element zawiera„

  " element:

Cześć

świat

Jestem dzieckiem div

Możemy wybrać elementy dziecięce za pośrednictwem rodzica „" klasa. To nie tylko wybierze swoje bezpośrednie „P„Elementy, ale także wybiera zagnieżdżone”P" elementy:

.Parent-Div P
kolor tła: #7F167F;
FONT-FAMILY: Kursywna;
Rozmiar czcionki: 25px;
Text-Align: Center;
Kolor: Whitesmoke;

Wyjście

Jak wybrać wszystkie bezpośrednie elementy dzieci?

Aby wybrać bezpośrednie dziecko rodzicielskiego div, możemy użyć „>”Symbol. Pomoże to wybrać wszystkie elementy „P”, które są bezpośrednim dzieckiem rodzica ”". Na przykład zastosowaliśmy następujące właściwości CSS:

.rodzic-Div> p
kolor tła: #7F167F;
FONT-FAMILY: Kursywna;
Rozmiar czcionki: 30px;
Text-Align: Center;
Kolor: Whitesmoke;

„„rodzina czcionek”Określa czcionkę wybranego elementu i„rozmiar czcionki”Służy do zdefiniowania rozmiaru czcionki:

Wyjście

Omówiliśmy selektory macierzystów CSS w HTML i CSS.

Wniosek

W CSS „:ma()„Selektor jest wykorzystywany jako pseudoklasa selektora nadrzędnego. Jest szczególnie używany do wyboru elementów nadrzędnych. Na przykład, ".Parent-Div: ma (H1)”Wybiera element nadrzędny o„

" elementy. Aby wybrać element dziecka elementu nadrzędnego, użyj „.Parent-Div p". Oświadczenie o warunkach można również użyć do wyboru wszystkich bezpośrednich elementów dziecka. W tym artykule wyjaśniono selektor nadrzędny CSS z przykładami.