html - CSS中的“div>p”和“div p”有什么区别

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 >p 选择 div 的直接子级，即 p 而 div p 选择 div 内的每个 p，无论 p 是否是 div 中其他 dom 的子级。你也可以说 div>p 是 css 3 选择器。

Answer 3

div > p表示“选择所有 <div> 子元素的 <p> 元素”，例如只选择第一个

将在这里选择：

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

div p表示“选择所有 <div> 的后代的 <p> 元素”，例如两个 <p> 元素都将被选中。

Answer 4

不同之处在于您是否希望它成为>父母的“直系子女”（）。

Answer 5

与div>p您一起指代所有<p>直接属于 a 的子级的内容<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>