CSS dotyczą wszystkich dzieci
W tym przewodniku dowiemy się, jak stosować styl do wszystkich dzieci w CSS i użyjemy przykładów, aby szczegółowo zrozumieć tę koncepcję.
Składnia:
element> elementWybierze wszystkie dzieci konkretnego rodzica.
div. klasa> *// właściwości CSS
Wybierze dzieci rekurencyjnie.
Przykład nr 1: Wybór wszystkich dzieci
Najpierw tworzymy plik HTML. Następnie tworzymy klasy „Div” i „rozprzestrzeniania się” i piszemy niektóre akapity w tych klasach. Używamy selektora dziecięcego w CSS i dodajemy trochę stylu, aby wybrał i zastosował ten styl do wszystkich dzieci. W tym przewodniku używamy kodu Visual Studio do demonstracji tych przykładów. Tworzymy ten plik HTML w tym oprogramowaniu i wpisujemy kod HTML. Musisz wpisać następujący kod. „„.rozszerzenie pliku html ”służy do zapisania tego pliku.
Tutaj mamy tag „”. W tym znaczniku „” mamy dwa akapity za pomocą „
". Potem pojawia się tag „”. W tym znaczniku mamy jeden akapit. Po końcowym znaczniku „” mamy również dwa inne akapity, w których zamykamy znacznik „”. Poza tym „div” piszemy jeszcze jeden akapit. Te akapity pomogą ci zrozumieć koncepcję wyboru i zastosowania wszystkich elementów w CSS.
Kod CSS:
Kod CSS znajduje odzwierciedlenie na poniższym obrazie. Połączyliśmy ten plik CSS z naszym plik HTML. Cały styl, który tutaj zrobiliśmy, zastosowano do utworzonego pliku HTML.
Tutaj używamy „div> p”, który wybiera wszystkie akapity obecne w „Div”. W kręconych klamrach używamy właściwości stylu, takich jak „kolor tła”, który służy do zmiany koloru tła wszystkich dzieci tego rodzica „Div”. Ustawiliśmy to jako „jasnoniebieski”. To jasnoniebieskie tło będzie miało zastosowanie do wszystkich dzieci. Zmieniamy „rodzinę czcionek” wszystkich dzieci, korzystając z właściwości CSS i ustawiamy ją na „Algierskie”. Ta nieruchomość będzie miała zastosowanie do wszystkich dzieci. Używamy również właściwości CSS „Alignaj tekstu” i wyrównujemy tekst dzieci do „centrum”.
Wyjście:
Możesz łatwo uzyskać wyjście, naciskając „Alt+B”. Renderuje wyjście na przeglądarce. Możesz łatwo zobaczyć różnicę, jak wybiera wszystkie dzieci i stosuje styl do tych dzieci.
Widzimy tutaj, że wybiera dwa pierwsze akapity, a także czwarte i piąte akapity i stosuje styl do tych akapitów. Nie zmienia to stylu trzeciego i szóstego akapitów, ponieważ nie są dziećmi rodzica „Div”. Trzeci akapit jest napisany w „rozpiętości”, dlatego nie jest to dziecko „Div”. Szósty akapit jest napisany poza „div”, więc styl nie jest stosowany do tego akapitu. Selektor dziecięcy wybiera tylko dziecko rodzica, które jest wymienione w kodzie CSS.
Przykład nr 2: Wybór wszystkich dzieci rekurencyjnie
W tym przykładzie, jeśli kod HTML jest taki sam jak poprzedni kod, ustawiamy nazwę klasy Div jako „AllChild” i używamy tej nazwy w kodzie CSS. Zmieniamy kod CSS i wybieramy dziecko rodzica.
W tym przykładzie zmieniamy kolor „tła” dzieci elementu klasy DIV. Tutaj „div.AllChilld> *”wybiera wszystkie elementy klasy DIV jako dziecko tego„ div ”. „*” Wybiera wszystkie dzieci klasy „Div” o nazwie „Allchild”. Zmienia kolor wszystkich dzieci w klasie DIV na „różowy”
Wyjście:
Oto dane wyjściowe, w którym użyliśmy „div.AllChild> *”selektor. Wybiera wszystkie dzieci rodzica, rekurencyjnie. Możesz zobaczyć, że zmienia kolor tła wszystkich elementów klasy DIV na kolor „różowy”.
Przykład nr 3: Wybór wszystkich dzieci w CSS
W tym kodzie używamy „” i . W „” mamy trzy „” i akapit „
„W tym akapicie. Używamy ponownie „”, a następnie zamykamy ten akapit za pomocą „
". Zamykamy „Div” i tworzymy kolejny rozpiętość, która jest obecna poza „Div”.Kod CSS:
„Wyświetlacz” „rozpiętości” jest ustawiony na „Block”. Używamy selektora dziecięcego, który wybiera wszystkie dzieci rodzica. Jest używany tutaj do wyboru wszystkich rozpiętości klasy DIV, ponieważ „Span” jest dzieckiem rodzica „Div”. Wybiera wszystkie elementy rozpiętości div, a następnie stosuje styl do wszystkich przęseł. Kolor tła wszystkich rozpiętości jest ustawiony na „jasnozielony”. „Rozmiar czcionki” wszystkich „rozpiętości” jest ustawiony na „35px”. „Rodzina czcionki” dla tego wszystkiego to „Gill Sans”. „Font-Waight” jest ustawiony na „Bold”, a „styl” jest ustawiony na „Kursywa”. Dotyczy to wszystkich dzieci.
Wyjście:
Stosuje styl do wszystkich dzieci „rozpiętości” rodzica „Div”. Ponieważ paragraf 1, 2 i 4 są napisane w „rozpiętości” w „Div”, styl tych trzech akapitów zmienia się. Oznacza to, że selektor dziecięcy wybiera rozpiętość Div i stosuje poprzedni styl do wszystkich tych dzieci.
Przykład nr 4: Wybór wszystkich dzieci rekurencyjnie
Tworzymy „klasę div” o imieniu „Dziecko”. Mamy dwa rozpiętości, a potem jeden akapit i znowu jeden rozpiętość wewnątrz Div. Jeden akapit jest napisany poza Div. Teraz wybieramy elementy klasy DIV rekursywnie za pomocą selektora CSS.
Kod CSS:
Span „wyświetlacz” to „blok”. Następnie mamy „div.Child> *”Selektor, który wybiera wszystkie elementy klasy DIV o nazwie„ Dziecko ”za pomocą„ *”. „*” Wybiera wszystkie elementy dziecięce. „Kolor tła” tutaj dla wszystkich dzieci to „lekki łosoś”. Kolor czcionki to „niebieskie przemoc”. Rodzina czcionki, której tu używamy, to „Times New Roman”. Używamy również „W-W-Wight” i ustawiamy go na „Bolder”. Używamy „wielkości czcionki” to „25px”. Teraz sprawdź, jak wygląda wyjście.
Pierwsze cztery akapity są zapisywane w klasie DIV „Dziecko”, a wszystkie styl, które użyliśmy w poprzednim przykładzie kodu CSS, jest tu zastosowane, jak pokazano na obrazie. Wybiera wszystkie elementy dziecięce klasy „Div” „Div” i stosuje style do tych elementów.
Wniosek
W tym przewodniku użyliśmy selektora dzieci i wyjaśniliśmy, jak wybrać wszystkie dzieci w CSS. Wyjaśniliśmy również, jak zastosować style dla wszystkich dzieci wybranego rodzica. Nauczyliśmy się, jak wybrać wszystkie dzieci wybranego rodzica i wybierać wszystkie dzieci rekurencyjnie za pomocą selektora dzieci CSS. W tym przewodniku zbadaliśmy cztery różne przykłady. Wykonaliśmy wszystkie przykłady i wyświetliśmy te kody i wyniki w tym przewodniku. Oczekujemy, że poznasz tę koncepcję po dokładnym przeczytaniu tego przewodnika i po wykonaniu tych przykładów samodzielnie.