CSS tylko dziecko
Przykład 01:
Uruchamiamy plik kodu HTML w kodzie Visual Studio z głównym znacznikiem otwierającym HTML, a następnie otworzeniem znacznika głównego przylegającego do otwierania znacznika tytułu. Ten tag tytułowy zawiera tytuł tej strony, a znacznik tytułu jest tutaj zamknięty. Następnie mamy główny tag stylu CSS i znacznik ciała, aby dodać elementy do strony HTML wraz z pewnym stylem. Musimy najpierw zrozumieć ciało HTML. W tym celu używamy prostego nagłówka o największym rozmiarze u góry strony HTML, i.mi. H1, pokazujący, że jest to przykład przesunięcia klasy tylko dla dzieci. Następnie używamy prostego elementu „Div”, aby stworzyć nowy podział na stronie internetowej HTML, a następnie jego tag dziecięcy, i.mi. etykieta. Ten znacznik etykiety używa w nim prostego zdania.
Teraz element „etykiety” jest jedynym tagiem w obrębie znacznika „div”. W tym przypadku zostanie to uznane za jedyne przesunięcie dziecka. Po tym na stronie HTML mamy inny element DIV. Ten element DIV zawiera w nim jeszcze dwa znaczniki lub elementy. Jego pierwszy znacznik to znacznik Span, a drugi to znacznik etykiety; Oba zawierają w nim pewne dane tekstowe. Ponieważ ten tag Div ma dwoje dzieci, żadne z nich nie było traktowane jako „tylko dziecko” przesunięcia do stylizacji. Wreszcie, mamy nowy tag akapitowy z jedynym tagiem dziecka „etykieta”. Teraz ten znacznik etykiet elementu akapitu zostałby również uznany za jedynego dziecka jego rodzica i odpowiednio zaprojektowany. Element ciała jest tutaj ukończony.
Weźmy pod uwagę przy projektowaniu tej strony HTML. W ramach stylu CSS używamy elementu „Etykieta” z przesunięciem klasy „Only-Child”, aby zastosować niektóre styl do wszystkich elementów dziecięcych poszczególnych tagów/elementów, które nie zawierają w nich żadnego innego dziecka. Innymi słowy, styl jest stosowany do elementów dziecięcych, które nie mają rodzeństwa. Używamy tła właściwości, aby dodać tło zielonego koloru dla tego konkretnego dziecka. Właściwość czcionki zawiera więcej niż 1 wartość dla tekstu zawartego przez konkretne dziecko, a jego rozmiar czcionki jest bardzo duży. Kolor tekstu „etykiet” tagów dziecięcych jest jasnoróżowy według koloru właściwości. Znacznik stylu obok elementu znacznika jest zakończony. Zamknijmy znacznik HTML po znaczniku ciała i zapiszmy ten kod. Spróbuj uruchomić go z przeglądarką Chrome, aby zobaczyć wyjście dla przesunięcia klasy tylko dziecka.
Poniższe wyświetlone wyjście pokazuje prosty nagłówek u góry, a następnie dwie wyraźne sekcje „Div” i jeden akapit. Sekcje wyświetlane na zielonym kolorze pokazują jedyny dziecko sekcji „Div”, a zatem odpowiednio zaprojektowane przez jedyne przesunięcie dziecka dla elementu etykiety. Linia po pierwszym elemencie dziecięcym reprezentuje drugą sekcję „Div” z dwójką dzieci, rozpiętości i etykiet, na tej samej linii. Podczas gdy drugie dziecko w zielonym tle jest częścią elementu akapitu.
Przykład 02:
Rozpoczynamy ten skrypt HTML z tym samym formatem kodów HTML - zacznij od znacznika HTML, a następnie znacznika głowy, znacznika ciała, otwierania i zamykania. Ciało HTML zawiera nagłówek o rozmiarze 1, największy nagłówek HTML. Rozpoczynamy uporządkowaną listę w naszym znaczniku ciała HTML. Ten element listy jest dodawany do znacznika listy „ol”. Ta uporządkowana lista zawiera w sumie 4 numeryczne elementy listy za pomocą tagów listy „Li”. Pierwsza numerowana lista zawiera w niej pojedynczą listę nieuporządkowaną z jednym elementem listy, który jest traktowany jako tylko dziecko. Druga lista głównej listy uporządkowanej zawiera inną nieorządkowaną listę w niej. Ta wewnętrzna lista nieoporządkowana zawiera w niej trzy elementy listy za pomocą tagów „Li”. Trzecia pozycja listy głównej listy uporządkowanej zawiera w niej pojedynczą listę z wewnętrznym tagiem listy nieorządkowanej, a następnie znacznik „Li”.
Ostatnia lista głównej listy uporządkowanej zawiera kolejny element listy nieopisanej „UL”. Ten element listy nie zamówiony zawiera w sumie trzy elementy listy w nim za pomocą tagów „Li”. Główny uporządkowany jest zamknięty po użyciu wszystkich 4 głównych elementów listy. Korpus naszej strony HTML jest ukończony tutaj.
Rzućmy okiem na projekt tej całej strony HTML. Używamy dwóch tagów słów kluczowych „Li” w znaczniku stylu, aby stylizować wszystkie elementy listy wewnętrznej głównej listy elementów. Właściwość typu w stylu listy dla tych elementów listy wewnętrznej jest określona jako styl „okręgu”. Z drugiej strony używamy jedynej klasy offsetowej dla elementów listy, aby dodać niektóre styliza. Określamy kolor tekstu dla tych elementów listy dzieci jako czerwony z różnymi użyciem rodziny czcionek. Używamy również typu stylu listy kwadratowej za pomocą „typu listy w stylu”. Stylizacja tego kodu została sfinalizowana. Zapiszmy i uruchommy nasz kod, aby zobaczyć dane wyjściowe.
Wyjście tego kodu pokazuje pojedynczy nagłówek, a następnie uporządkowana lista 4 elementów listy numerowanych. Pojedyncze nieuporządkowane elementy tych uporządkowanych elementów listy są podświetlone w kolorze czerwonym tekst. Reszta elementów listy nie zamówionych jest wyświetlana w stylu Bullet Circle.
Wniosek
Ten artykuł ustanowił znak, aby zademonstrować użycie jedynej klasy offsetowej w stylizacji CSS, aby stylizować jedyne elementy strony HTML, które są jednym dzieckiem ich elementu macierzystego. W tym celu wykorzystaliśmy w sumie 2 krótkie przykłady w naszych skryptach HTML, aby zademonstrować zastosowanie tej klasy przesunięcia do takich elementów dziecięcych. Pierwszy przykład zawiera użycie tego przesunięcia do niektórych sekcji „Div”, podczas gdy drugi przykład używa go do stylizowania elementów listy nie zamówionych dla numerowanej listy.