Question

div>p选择所有<p>元素，其中父元素为<div>元素，div p元素选择<p>元素内的所有<div>元素。这就是W3schools所说的，但我不知道有什么区别。如果一个元素在另一个元素内，则是一个元素，另一个元素是父元素我没有看到差异。

Answer 1

示例：

<div>
    <span>
        <p>...</p>
    <span>
</div>

div > p不会选择该段落，但会div p。换句话说，第一个选择器是父子，而第二选择器是祖先 - 后代。

Answer 2

div＆gt; p选择div的直接子节点p，而div p选择div内的每个p，无论p是否是div中其他dom的子节点。你也可以说div＆gt; p是css 3选择器。

Answer 3

div > p表示“选择所有＆lt; p＆gt;元素，它们是＆lt; div＆gt;”的子元素，例如这里只选择第一个

：

<div>
  <p>...</p>
  <div>
    <p>...</p>
  </div>
</div>

div p表示“选择所有＆lt; p＆gt;元素，它们是＆lt; div＆gt;”的后代，例如两者都是＆lt; p＆gt;将选择元素。

Answer 4

区别在于你是想让它成为父母的“直接孩子”（>），还是允许它成为“直系孩子”，而且还是“孙子”或“曾孙子” “（依此类推）”（）。

Answer 5

使用div>p，您可以引用<p>直接孩子的所有<div>。

<div>
    <p>Selected!</p>
    <a><p>Not Selected</p></a>
</div>

使用div p，无论深度如何，都可以引用<p>中的所有<div>

<div>
    <p>Selected!</p>
    <a><p>Selected!</p></a>
</div>