什么是CSS选择器“的div p”和“DIV> P”之间的区别？ [重复](What’s

可能重复：
是“DIV> P”和“分区P”一样吗？

下面是我使用的为CSS参考的页面，请注意，我才开始学习HTML / CSS今天上午。

我感到困惑两个选择器，援引部位，“分区P”选择器selects all <p> elements inside <div> elements ，并且“DIV> P”选择器selects all <p> elements where the parent is a <div> element 。

是什么这两个之间的区别？ 其中，这两个选择，不能互换使用的例子将是有益的，如果可能的话。

Answer 1:

div > p仅选择<p>是一个直接子元素<div>

所以：

div > p

将选择本款：

<div>
    <p>This is a paragraph</p>
</div>

但不会选择这一段：

<div>
    <table>
        <tr>
            <td>
                <p>This will not get selected</p>
            </td>
        </tr>
    </table>
</div>

Answer 2:

选择所有p一内标签div是指所有p一内标签div ...其中作为第二器件的p是一个低于只是一个级别标记div 。

从30个CSS选择器，你必须记住 ＃8：

标准XY和X> Y之间的区别是，后者将仅选择直接孩子。 例如，考虑下面的标记。

考虑下面这个例子：

HTML

<div class="one">
  <p>asdf</p>
  <div>
    <p>asdf</p>
  </div>
</div>

<div class="two">
  <p>asdf</p>
  <div>
    <p>asdf</p>
  </div>
</div>

CSS

div.one p {
  margin: 20px;
  background-color:#F00;
}

div.two > p {
  margin: 20px;
  background-color:#0F0;
}

在第一个，两个p标签会被用红色（ #F00 ），因为它选择了所有p的内标签div 。 在第二个中，只有第一p标签将是蓝色（ #0F0 ），因为它仅选择直接后代。

DEMO

Answer 3:

div p是后代选择，它将匹配任何p ，其具有元件div在其较高分层。 div > p ，它使用子选择器，将只匹配p元素，其直接父是一个div 。

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Answer 4:

情况1： "div p"意味着所有的<p>的将被选择

<div>
  <p id=1> 
    <p id=2>
      <p id=3></p>
    </p>
  </p>
</div>

情况2： "div > p"仅<p id=1>将被选择的，即所有p关于标记的div作为直接父

Answer 5:

div p将匹配任何p与祖先div ，不必是其母公司。 所以，所有这些比赛：

<div><p>Matches</p></div>
<div><form><p>Matches</p></form></div>
<div><section><blockquote><p>Matches</p></blockquote></section></div>

div > p只会匹配p具有直接父div 。 像这样：

<div><p>Matches</p></div>

（你会注意到，一切由匹配div > p也由匹配div p 。）

文章来源: What’s the difference between the CSS selectors “div p” and “div > p”? [duplicate]