„Czy kiedykolwiek widziałeś, jak niektórzy rodzice ignorują swoje jedno dziecko, podczas gdy reszta bawi się, ponieważ to dziecko jest najstarsze czy coś takiego? Zwykle dzieje się tak z najstarszym dzieckiem, ponieważ rodzice myślą, że może nie potrzebować tyle uwagi. Jeśli to zrobiłeś, koncepcja nie pierwszego typu nie będzie dla ciebie trudna do zrozumienia. Pierwszy typ typu CSS został użyty do po prostu zignorowania pierwszego dziecka określonego rodzica i wybrania reszty elementów dziecka tego konkretnego rodzica. Innymi słowy, musi wybrać każdy element, który nie jest pierwszym potomkiem elementu nadrzędnym. W formacie pierwszego dziecka) jest on pokazany jako parametr. W ramach tego artykułu nauczymy się korzystać z nieodowiżej dziecięcej własności CSS."

Przykład 01

Zacznijmy od pierwszego przykładu tego artykułu, tworząc standardowy format pliku HTML za pomocą znaczników. Rozpoczęliśmy ten skrypt HTML z tagiem HTML, który następował. Znacznik głowy zdefiniował nagłówek naszej strony internetowej HTML. Używamy więc znacznika tytułu, aby dodać nazwę tej strony. Po zamknięciu tagu tytułowego używamy znacznika tytułowego w znaczniku głównym. Po dyskusji na ciele tej strony HTML będziemy rzucić okiem na znacznik.

W obrębie znacznika ciała zaczynaliśmy od prostego nagłówka rozmiaru 1. Oprócz tego używaliśmy „DL” do utworzenia listy opisu. W ramach tej listy opisów użyto w sumie 2 specyfikacji opisu zgodnie z otwieraniem i zamykaniem „DT” w linii 13 i 17. Definicja opis „DD” Tagi służą do przedstawienia elementów z listy opisu, i.mi., w wierszach 14, 15, 16, 18 i 19. Lista opisów została zamknięta po dodaniu elementów opisu. Ciało naszej strony HTML zostało zakończone. Więc zamykaliśmy tag ciała, ja.mi., . Teraz przyjrzymy się znaczniku stylu naszego znacznika naszego człowieka, aby stylizować ciało naszego kodu HTML. Specyfikacja opisu „DT” została zaprojektowana z masą czcionki odważnej, dużej wielkości czcionki, rodzina czcionki serifowej i wielkości czcionki 25px. Tagi opisu definicji są stylizowane za pomocą marginesu 4px i rozmiaru czcionki 22px.

W przypadku tagów „DD” używamy przesunięcia „nie” (pierwszego w rodzaju), aby stylizować wszystkie swoje dzieci, z wyjątkiem pierwszego bezpośredniego dziecka. Dodaliśmy rozmiar czcionki 18px i granicę 3px stałego koloru żółtego zielonego. Teraz ten styl byłby zastosowany tylko do reszty dziecięcych znaczników „DD” bez stylizacji jego pierwszego dziecka lub członka. Chodzi o tag stylu i tej strony HTML. Musimy więc go zapisać, a następnie wykonać opcję Uruchom kodu Visual Studio.

Po wykonaniu tego skryptu HTML w przeglądarce Chrome, pokazaliśmy poniżej wyjścia listy opisu. Nagłówek został wyświetlony bez żadnego stylizacji, a lista opisów wyświetlała w sumie dwa opisy specyfikacji głównych elementów listy, i.mi., Zwierzęta i zwierzęta morskie. Główne specyfikacje opisu są większe niż reszta elementów listy określonych przez znacznik stylu. Jednocześnie opisy definicji „DD” zostały stylizowane inaczej.

Przedmiot przylegający do numeru 1 jest stylizowany nieco większy niż reszta przedmiotów. Oprócz tego wszystkie przedmioty dostały wokół siebie żółtą kolorową granicę, ale pierwszy element pozostał niezmieniony, ponieważ jest to pierwsze dziecko i należy go unikać zgodnie z pierwszym przesunięciem CSS używanym w stylu w stylu etykietka.

Przykład 02

Zacznijmy od kolejnego przykładu CSS, a nie pierwszego typu selektora przesunięcia, wraz z innymi selektorami, aby dokonać porównania. Więc rozpoczęliśmy ten kod HTML ze standardowym formatem tagów HTML, i.mi., zaczynając od prostego znacznika HTML, a następnie znacznika głowy i ciała. Będziemy rzucić okiem na główną część ciała tego skryptu HTML przez znacznik ciała, i.mi., . Zaczyna się od użycia znacznika nagłówka

największego rozmiaru i zamyka

z pewnym tekstem w obu znacznikach.

Następnie zawiera sekcję „div” do utworzenia nowego pojemnika w obszarze ciała HTML z klasą „rodzic” określoną do użycia do stylizacji. Ten kontener Div miałby w sobie niektóre akapity i nagłówki. Nagłówek tego pojemnika byłby rozmiar 1, począwszy od

i kończąc z

. Następnie zawiera w nim w sumie 4 akapity przy użyciu startu

Tag i zakończenie

etykietka. Po zakończeniu i zamknięciu akapitów używamy znacznika do zamknięcia pojemnika do dalszego wstawienia elementów tutaj. Korpus tego znacznika HTML został tutaj ukończony, ponieważ używał znacznika do zamykania części ciała. Rzućmy okiem na nagłówek tej strony HTML, dodając tytuł do tej strony za pomocą znacznika „tytułu” w głównym znaczniku „Head” HTML. Następnie wykorzystaliśmy znacznik „stylu” HTML CSS, aby dodać stylizację do ciała naszej strony HTML. Tak więc rozpoczęto od klasy „rodzica” i selektora „pierwszego dziecka”, aby dodać stylizację do pierwszego dziecka konkretnego elementu „Div”, który został określony w klasie „Parent”.

Teraz nagłówek tego „Div” pojemnika byłby kolorowy z niebieską rodziną w stylu czcionki i czcionki. Korzystamy z tagu akapitowego „P” z pierwszym wyborem typu, aby dodać styl do pierwszego akapitu z reszty akapitów. Zawierałby tło blanszowanych migdałów i rozmiar czcionki 2.25em. Teraz ta sama klasa nadrzędna jest używana z selektorem „Not (:: First Type)” do stylizowania tego samego rodzaju elementów dziecięcych, i.mi., „P” z wyjątkiem pierwszego dziecka pojemnika „DIV”. Wszystkie te elementy byłyby zielone morskie z większymi rozmiarami czcionek i różnymi rodzinami czcionek.

Ponadto selektor ostatniego dziecka został użyty do stylizowania ostatniego dziecka sekcji „Div”, który jest również akapitem. Będzie kolorowy pomarańczowy o normalnym stylu czcionki i innej rodzinie czcionki. Stylizacja została tutaj ukończona. Teraz będziemy go wykonać, aby zobaczyć zmiany.

Wyjście nie wykazuje stylizacji dla pierwszego nagłówka, ukośnego niebieskiego koloru pierwszego nagłówka pojemnika „Div”, pierwszy akapit byłby stylizowany z jasnozijskim tłem, następne dwa akapity są zabarwione kolorem morskim, a ostatni akapit jest kolorowy pomarańczowy.

Wniosek

Ten artykuł zawiera krótkie wyjaśnienie selektora CSS, a nie pierwszego w rodzaju. W tym celu omówiliśmy jego użycie i aplikację na elementach CSS w akapicie wprowadzającym. Następnie zaimplementowaliśmy go w niektórych przykładach skryptu HTML, aby pokazać jego działanie. Oprócz tego, omówiliśmy również jego porównanie z niektórymi selektorami rodzeństwa, aby działała bardziej jasna i widoczna.