Czy element CSS "#id" również wybiera wnuki?

Question

Powiedz, że mam <div id="container"> z różnymi elementami w środku, w tym tabelami. Czy selektor CSS #container table wybiera wszystkie tabele w ramach div (w tym wnuki, prawnuki, itp.)? Czy może wybrać tylko dzieci?

Ponadto, jeśli chcę wybrać pierwszy element div div elementu kontenera, w jaki sposób mogę to zrobić?

Answer 1

Tak; mówiąc prosto, wybiera wszystkie elementy table w obrębie #container, niezależnie od poziomu zagnieżdżenia.

Przestrzeń nazywa się descendant combinator. Jak dokładnie to, co mówi na puszce, wybiera dowolnych potomków. Obejmuje to dzieci, wnuki itp., Niezależnie od poziomu zagnieżdżenia. Nie tylko wybiera dzieci; do tego celu służy child combinator >.

Aby wybrać pierwsze dziecko w swoim pojemniku jako div, należy użyć

#container > div:first-child 

Lub jeśli masz coś innego, jako pierwsze dziecko i chcesz wybrać pierwsze dziecko, które jest typu div, należy użyć

#container > div:first-of-type 

---

_{W tym celu często mówi się, że wybiera się tylko "bezpośrednie dzieci", a tam, gdzie ludzie mówią "dzieci", często mają na myśli "potomków". Ściśle mówiąc, "dzieci" odnoszą się do bezpośredniego poziomu zagnieżdżenia. Nie ma czegoś takiego jak "dziecko pośrednie".}

Answer 2

#container table 

wybiera wszystkich potomków będących tabelami.

#container > table 

wybiera wszystkie dzieci będące tabelami.

Answer 3

Ponadto, jeśli chcę wybrać pierwszy element div div w kontenerze div, w jaki sposób mogę to zrobić?

#container > div{} 

Answer 4

#container table wybierze wszystkie table elementy, które są wewnątrz elementu #container, bez względu na to, jak głęboko w drzewie DOM są. Jeśli chcesz kierować tylko elementy pierwszym poziomie chcesz iść na temat korzystania z tego: #container > table

Aby wybrać pierwszą div dziecka w elemencie pojemnika, można wykonać następujące czynności: #container > div:first-child - to wybierze tylko div dziecka pierwszego poziomu. Albo, jeśli chcesz, aby objąć wszystkie pierwsze elementy div wewnątrz kontenera, można użyć #container div:first-child

ta jest ważna tylko wtedy, gdy div jest rzeczywiście pierwszym dzieckiem tego elementu

<div id="container"> 
    <div>some content</div> 
</div> 

tak, na przykład nie może istnieć przed nim żadna etykieta p (ani żadna inna).

<div id="container"> 
    <p>Some text</p> 
    <div>some content</div> 
</div> 

Jeśli div nie jest pierwszym dzieckiem, trzeba by wykonać następujące czynności: #container div:first-of-type