Selektory CSS Combinator | Wyjaśnione

Kombinatory w CSS opisują związek między niektórymi elementami i na podstawie tego związku, możesz stylizować elementy. Przydaje się to, gdy chcesz stylizować niektóre elementy naraz, zamiast stylizację elementów indywidualnie. Na przykład możesz stylizować wszystkie ogólne rodzeństwo elementu za pomocą ogólnego kombinatora Siblatora CSS. Selektory CSS Combinator są następujące.

1. Wybór potomków
2. Selektor dla dzieci
3. Sąsiedni selektor rodzeństwa
4. Generalny selektor rodzeństwa

Wszystkie z nich są tutaj dogłębne.

Wybór potomków

W celu wybrania wszystkich następców elementu używana jest selektor potomki. Następcy obejmują wszystkie dzieci elementu, może to być bezpośrednie dziecko lub dziecko na wiele poziomów w dół drzewa Dom. Jest reprezentowany przy użyciu przestrzeni między rodzicem a elementem dziecięcym.

Składnia

Dziecko rodzicielskie
wartość nieruchomości;

Przykład

Poniższy przykład pokazuje działanie selektora potomka.

Html

Jestem następcą Div.

Jestem także następcą Div.

Nie jestem następcą Div.

W powyższym kodzie HTML utworzyliśmy element i zagnieżdżyliśmy dwa

elementy w tym Div. Poza tym stworzyliśmy również

element poza elementem.

CSS

div
Wyściółka: 5px;
Border: 2px Solid Black;

div p
kolor tła: różowy;

Tutaj najpierw dajemy wyściółkę i granicę do Div, a następnie używając kombinatora potomka, różowy kolor tła jest podawany wszystkim potomkom

elementy div.

Wyjście

Następcy elementu są wyróżnieni na różowym.

Selektor dla dzieci

Jak sama nazwa wskazuje, kombinator dziecięcy wybiera wszystkie dzieci elementu. Różni się od selektora potomków w sposób, który wybiera tylko bezpośrednie dzieci elementu. Ponadto jest reprezentowany przez znak większy niż (>).

Składnia

rodzic> Dziecko
wartość nieruchomości;

Przykład

Użyjemy przykładu podobnego do powyższego, aby zademonstrować działanie selektora kombinatora dziecięcego.

Html

To jest bezpośrednie dziecko.

To również jest bezpośredni dziecko.

Ponieważ jestem obecny w elemencie sekcji, jestem potomkiem Div, ale nie bezpośrednim dzieckiem.

Nie jestem dzieckiem.

Ja też nie jestem dzieckiem.

Tutaj stworzyliśmy DIV i zagnieżdżono dwa

elementy i element wewnątrz div. Tag dalej gniazduje

element. Oprócz tego dwóch

Elementy są generowane, ale poza Div.

CSS

div
Wyściółka: 5px;
Border: 2px Solid Black;

div> p
kolor tła: Hotpink;

Używamy kombinatora dziecięcego, aby nadać bezpośrednio kolor hotpink

Co więcej, dzieci Div przekazaliśmy Div trochę wyściółki i granicy.

Wyjście

Selektor kombinatora dziecięcego działa poprawnie.

Sąsiedni selektor rodzeństwa

Ten selektor służy do celów stylizacji sąsiedniego rodzeństwa. Jest reprezentowany przy użyciu znaku plus (+) między dwoma elementami.

Składnia

element + element
wartość nieruchomości;

Przykład

Załóżmy, że chcesz stylizować

element, który jest sąsiednim rodzeństwem elementu.

Html

Jestem bezpośrednim dzieckiem.

Jestem także bezpośrednim dzieckiem.

Jestem sąsiednim rodzeństwem.

Nie jestem sąsiednim rodzeństwem.

Aby zademonstrować działanie sąsiedniego kombinatora rodzeństwa, stworzyliśmy trochę

elementy wewnątrz i na zewnątrz elementu.

CSS

div
Wyściółka: 5px;
Border: 2px Solid Black;

div + p
kolor fioletowy;
Styl czcionki: Kursywa;
Font-Weight: Bold;

Korzystając z sąsiedniego selektora rodzeństwa, dajemy fioletowy kolor, czcionkę kursywą i odważną masę czcionki do sąsiedniego

rodzeństwo div.

Wyjście

Przylegające rodzeństwo elementu DIV zostało stylizowane za pomocą sąsiedniego kombinatora rodzeństwa.

Generalny selektor rodzeństwa

Jak sama nazwa wskazuje, ten kombinator CSS stylizuje wszystkie rodzeństwo elementu, który dzieli tego samego rodzica. Reprezentowany przez znak Tylde (~).

Składnia

element ~ element
wartość nieruchomości;

Przykład

Użyjemy przykładu użytego w powyższej sekcji, aby zobaczyć, jak działa ten kombinator.

CSS

div ~ p
kolor fioletowy;
Styl czcionki: Kursywa;
Font-Weight: Bold;

Korzystając z ogólnego selektora rodzeństwa, dajemy styl wszystkim

rodzeństwo elementu div.

Wyjście

Wszystkie generalne rodzeństwo elementu DIV zostały pomyślnie zaprojektowane.

Wniosek

Selektor kombinatora CSS wybiera elementy na baiss ich relacji z innymi elementami. Istnieją cztery selektory kombinatory w CSS. A Wybór potomków stylizuje wszystkich następców elementu, a Selektor dla dzieci stylizuje bezpośrednie dzieci elementu, sąsiednie rodzeństwo selektor styluje rodzeństwo elementu, który pojawia się zaraz po tym elemencie, i Generalny selektor rodzeństwa Styl wszystkie rodzeństwo elementu. Ten post szczegółowo opisuje te kombinatory wraz z odpowiednimi przykładami.