CSS选择器"div p"和"div> p"之间有什么区别？

Question

可能重复:
"div> p"和"div p"相同吗？

这是我用作CSS参考的页面,请注意我今天早上才开始学习HTML/CSS.

我对两个选择器感到困惑,引用了网站,"div 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>a的直接子元素<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标签是blue(#0F0),因为它只选择直接后代.

DEMO