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

Question

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

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

Answer 1

是的; 简而言之，即选择table内的所有元素#container，而不管嵌套级别如何。

该空间称为后代组合子。正如它在锡上所说的那样，它选择任何后代。这包括孩子、孙子等等，无论嵌套级别如何。它不仅选择孩子；该目的由子组合>器服务。¹

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

#container > div:first-child

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

#container > div:first-of-type

---

¹ _{为此，人们常说只选择“直系子女”，而人们说“子女”的地方通常指的是“后代”。但是，严格来说，“children”是指直接嵌套级别。没有所谓的“间接孩子”。}

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{}