Nie potrafię odróżnić element:first-child
ielement:first-of-type
Na przykład powiedz, że masz element div
div:first-child
→ Wszystkie <div>
elementy, które są pierwszym dzieckiem swojego rodzica.
div:first-of-type
→ Wszystkie <div>
elementy, które są pierwszym <div>
elementem ich rodzica.
Wydaje się, że to dokładnie to samo, ale działają inaczej.
Czy mógłby ktoś wyjaśnić?
css
css-selectors
BoltClock
źródło
źródło
Odpowiedzi:
Element nadrzędny może mieć jeden lub więcej elementów podrzędnych:
Wśród tych dzieci tylko jedno z nich może być pierwsze. Odpowiada temu
:first-child
:Różnica pomiędzy
:first-child
i:first-of-type
polega na tym,:first-of-type
że dopasuje pierwszy element swojego typu elementu, który w HTML jest reprezentowany przez jego nazwę tagu, nawet jeśli ten element nie jest pierwszym elementem podrzędnym elementu nadrzędnego . Jak dotąd wszystkie elementy potomne, na które patrzymy, byłydiv
s, ale proszę o cierpliwość, za chwilę do tego dojdę.Na razie prawdą
:first-child
jest również odwrotność: każdy też jest:first-of-type
z konieczności. Ponieważ pierwsze dziecko jest tutaj również pierwszediv
, dopasuje zarówno pseudoklasy, jak i selektor typudiv
:Teraz, jeśli zmienisz typ pierwszego dziecka z
div
na coś innego, na przykładh1
, nadal będzie to pierwsze dziecko, alediv
oczywiście nie będzie już pierwszym ; zamiast tego staje się pierwszym (i jedynym)h1
. Jeśli są jakieś innediv
po tym pierwszym dziecku w obrębie tego samego rodzica elementy, pierwszy z tychdiv
elementów będzie pasowałdiv:first-of-type
. W podanym przykładzie drugie dziecko stajediv
się pierwszym dzieckiem po zmianie pierwszego dziecka nah1
:Zauważ, że
:first-child
jest to równoważne z:nth-child(1)
.Oznacza to również, że chociaż każdy element może mieć tylko jeden pasujący element podrzędny
:first-child
na raz, może i będzie miał tyle elementów potomnych pasujących do:first-of-type
pseudoklasy, ile ma typów dzieci, które ma. W naszym przykładzie selektor.parent > :first-of-type
(z niejawną*
kwalifikacją:first-of-type
pseudo) dopasuje dwa elementy, a nie tylko jeden:To samo odnosi się do
:last-child
i:last-of-type
: any:last-child
jest również z konieczności:last-of-type
, ponieważ absolutnie żaden inny element nie występuje w swoim rodzicu. Jednak ponieważ ostatniediv
jest również ostatnim dzieckiem, plikh1
nie może być ostatnim dzieckiem, mimo że jest ostatnim w swoim rodzaju.:nth-child()
i:nth-of-type()
działają w zasadzie bardzo podobnie, gdy są używane z dowolnym argumentem będącym liczbą całkowitą (jak w:nth-child(1)
powyższym przykładzie), ale różnią się potencjalną liczbą elementów dopasowanych przez:nth-of-type()
. Jest to szczegółowo omówione w artykule Jaka jest różnica między p: nth-child (2) a p: nth-of-type (2)?źródło
Stworzyłem przykład, aby zademonstrować różnicę między
first-child
ifirst-of-type
tutaj.HTML
CSS
Aby zobaczyć pełny przykład, odwiedź https://jsfiddle.net/bwLvyf3k/1/
źródło
Różnicę między typem pierwszego dziecka i pierwszego dziecka można zrozumieć na przykładzie. Musisz zrozumieć następujący przykład stworzony przeze mnie i naprawdę działa, możesz wkleić kody w swoim edytorze, zrozumiesz, czym one są i jak oni pracują
Kod nr 1 dla pierwszego typu:
wynik
.p1, .p2, .p3 będą stylizowane, a ich kolor będzie czerwony. nawet jeśli umieścimy .p1 po drugim div, będzie on czerwony.
Kod # 2 na pierwsze dziecko:
wynik:
jeśli umieścimy .p2 po drugiej div 2, nie będzie on czerwony, jednak w pierwszym przypadku działał.
źródło