CSS「#id元素」是否也選擇孫子？

Question

說我有一個<div id="container">與其中的各種元素，包括表。 CSS選擇器#container table是否選擇div中的所有表格（包括孫兒，曾孫等）？還是隻選擇兒童？

另外，如果我想選擇容器div內的第一個子div，我該怎麼做？

Answer 1

是;簡而言之，無論嵌套級別如何，都會選擇#container內的所有table元素。

該空間被稱爲descendant combinator。正如它在錫上所說的那樣，它會選擇任何後代。包括兒童，孫輩等，不管其嵌套水平如何。它不僅選擇孩子，該目的由child combinator >提供。

要選擇容器中的第一個孩子爲div，您使用

#container > div:first-child 

或者，如果你有別的東西作爲第一個孩子，你要挑的第一個孩子是類型div，您使用

#container > div:first-of-type 

---

_{爲此，人們常說只選擇「直接的孩子」，而人們說「孩子」的地方往往是指「後代」。嚴格來說，「兒童」是指即時的嵌套級別。沒有「間接孩子」這樣的事情。}

Answer 2

#container table 

選擇所有表中的後代。

#container > table 

選擇所有表中的孩子。

Answer 3

另外，如果我想選擇容器內的第一個子div，請問我該怎麼做？

#container > div{} 

Answer 4

#container table將選擇所有的table元素是#container元素內，不管他們有多深DOM樹的。 如果你想要的目標只有第一級別的元素，你會去使用這樣的：#container > table

要選擇容器元素中的第一個孩子的div，你會做到以下幾點：#container > div:first-child - 這將只選擇一級孩子div。或者，如果你想指定的容器中的所有第一div元素，你會使用#container div:first-child

這僅僅當div實際上是該元素的第一個孩子

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

如此，例如（或任何其他）之前不得有任何p標籤。

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

如果div不是第一個孩子，你需要做到以下幾點：#container div:first-of-type