CSS“#id元素”是否也选择了孙子？

Question

假设我有一个<div id="container">，其中包含各种元素，包括表格。 CSS选择器#container table是否选择了div中的所有表（包括孙子，曾孙等）？还是仅选择儿童？

另外，如果我想在容器div中选择第一个子div，我该怎么做？

Answer 1

是;简而言之，它会选择table中的所有#container元素，而不管嵌套级别。

该空间称为descendant combinator。正如它在锡上所说的，它选择任何后代。这包括儿童，孙子等，无论嵌套水平如何。它不仅选择儿童;这个目的由child combinator >。 ¹

提供

要选择容器中的第一个子项div，请使用

#container > div:first-child

或者，如果你有其他东西作为第一个孩子并且你想选择第一个div类型的孩子，你可以使用

#container > div:first-of-type

---

¹ _{为此目的，人们经常说只选择“直接孩子”，而人们说“孩子”时，他们常常指的是“后代”。严格来说，“儿童”指的是直接筑巢水平。没有“间接孩子”这样的东西。}

Answer 2

#container table

选择所有表格的后代。

#container > table

选择所有子表格。

Answer 3

#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

Answer 4

  

另外，如果我想在容器中选择第一个子div   div，我该怎么做？

#container > div{}