Czasami spotykamy taką sytuację, w której chcemy uniknąć niektórych przedmiotów lub zawartości między grupą tych samych elementów. Określenie ich ręcznie kosztuje czas. Aby uniknąć konsumpcji czasu, CSS odnosi się do tak skutecznych i wydajnych właściwości, aby wykorzystać je w kodzie, który jest dość łatwo zrozumiały i sprawia, że kod jest zarządzany. Odbywa się to przez CSS „nie pierwszą” właściwość.
Nie: własność pierwszego dziecka
Ta właściwość CSS służy do wyboru całej zawartości HTML tego samego typu innego niż pierwsza. Ta właściwość jest przeciwna do właściwości CSS „CSS pierwszego typu”, która jest odpowiedzialna za wpływanie tylko na pierwszą z większości zawartości HTML tego samego typu. Oprócz dodawania stylu do wszystkich tagów przez wbudowane CSS Unikanie pierwszego, nie: właściwość pierwszego dziecka usunęła dwuznaczność, która jest tworzona przez bałagan wbudowanego CSS, który sprawia, że kod jest trudny do zrozumienia i skomplikowany. Dodajemy tylko niewielki kawałek kodu w wewnętrznym lub zewnętrznym CSS, określając zawartość HTML, w której chcemy zastosować tę właściwość. Wtedy automatycznie dotknięty jest pierwsze dziecko.
Składnia:
Składnia właściwości not: pierwszorzędna jest następująca:
Content_name: not (: First-Child)
Wartość nieruchomości; \\ Każdy efekt, który chcemy zastosować na elementach HTML innych niż pierwszy.
Przykład 1: nie: pierwszy dziecko akapitu
Aby rozwinąć koncepcję braku pierwszego dziecka, używamy
akapity treści HTML w celu zastosowania tej właściwości. Akapity to zawartość HTML, o której mówi się, że to kilka linii tekstowych. Te linie są sekwencjonowane i wyrównane w taki sposób, aby utworzyć akapit. Kod zawiera znacznik ciała. Używamy dwóch prostych nagłówków i trzech akapitów, które zawierają z nimi prosty tekst kilku słów. Używamy przykładowego tekstu Lorema ipsum.
Musimy tylko zobaczyć wyniki nieruchomości. Aby było to dość proste, tylko ta treść jest zadeklarowana. Następnie zamknij znaczniki ciała.
Sekcja główna zawiera tylko tag stylu, dzięki czemu jest wewnętrznym CSS.
Użyj znacznika akapitu
z nieruchomościami nie: pierwszorzędnym, aby zastosować wszystkie skutki na wszystkie akapity, z wyjątkiem pierwszego. Dodajemy kolor czerwonej czcionki do akapitów. Zamknij wszystkie otwarte tagi.
Zapisz kod z rozszerzeniem HTML do edytora tekstu. To rozszerzenie sprawia, że ikona pliku jako domyślna przeglądarka. Ta ikona zapewnia, że plik jest stroną internetową.
Przykład 2: Nie: pierwszy dziecko na liście
Listy HTML są ważnym sposobem reprezentowania tekstu. Aby wdrożyć właściwość CSS selektora pierwszego dziecka, używamy dwóch list. Aby rozwinąć dalej, najpierw musimy mieć wiedzę na temat list HTML. Dwa typy list są tworzone za pośrednictwem języka HTML - lista nieopisana
Teraz, wracając do przykładu, użyliśmy dwóch nieopisanych list. Obie listy są zadeklarowane w Div. Najpierw rozważ sekcję ciała HTML kodu. Dwa proste nagłówki,
, są zadeklarowane. Następnie znacznik DIV jest używany do deklarowania kontenera Div. Wewnątrz div, pierwszy
Właściwość marginesu to wartość CSS odległości obiektu od granicy wyświetlania tła. Na przykład margines listy jest deklarowany do utworzenia listy w określonej odległości.
Obie listy są zadeklarowane podobnie posiadające trzy elementy listy. Teraz zamknij wszystkie tagi i skieruj się w kierunku wewnętrznego CSS. Nagłówek jest stosowany przez właściwość czcionki. Następnie główna część kodu nie: właściwość pierwszego dziecka jest stosowana.
Ta właściwość jest stosowana na
Div i
Zamknij wszystkie tagi. Zapisz plik i zaimplementuj go w przeglądarce, aby zobaczyć wyniki.
Zobaczysz, że pierwsza lista pojawia się domyślnie bez żadnych zmian. Podczas gdy na drugą listę wpływają wszystkie wartości i właściwości, które zastosowaliśmy do znacznika listy nieopisanej w sekcji głównej.
Podobnie, jeśli zastosujemy jakąkolwiek nieruchomość do wszystkich
Ustawiliśmy styl czcionki na kursywę we wszystkich UL Div. Ale wartości zapisane w nielegalnej właściwości selektora dzieci są stosowane na wszystkich listach oprócz pierwszej.
Zastosuj oba style na ten sam kod nadwozia. Zapisz i zaimplementuj. Widzimy, że styl kursywy jest stosowany na wszystkich elementach listy, ponieważ nie wspominaliśmy o nie: właściwości pierwszego dziecka z nimi. Podczas gdy wartości, które mają selektor, są stosowane tylko na drugiej liście.
Wniosek
CSS not: pierwszy dziecko daje nam wiedzę na temat stosowania właściwości CSS na wszystkich elementach HTML, a nie pierwszego. Warunkiem wdrożenia tego zjawiska jest to, że cała zawartość HTML musi być tego samego typu, w przeciwnym razie efekt ten nie zostanie zastosowany. Od samego początku rozmawialiśmy o podstawowym użyciu HTML i. Następnie CSS nie: pierwsza dziecko jest wyjaśnione przez podanie składni, po której następuje zastosowanie tej właściwości. Następnie wdrożyliśmy tę koncepcję w dwóch różnych zawartości HTML: jeden to akapit, a drugi to kontener Div.