“div > p”和“div p”一样吗？

Question

嘿，我有一个明显的问题。

对于像这样的代码：

<div>
     <p>We want to format this text :)</p>
</div>

有些人使用如下选择器：

div > p {
     something
}

还有其他人：

div p {
     something
}

在这种情况下有什么不同？在我看来 - 没有？

顺便说一句，后代项目不总是一个孩子吗？！两者有什么区别？我正在阅读 w3.org，但看不懂 :)

谢谢！

Answer 1

简单：

 div > p

只影响直接子代。

 div p

影响孙辈、孙辈等。也是如此。（在您的示例中不会产生影响）

子选择器isn't supported by IE6。

Answer 2

Pekka 在his answer 中对其进行了理论上的解释。根据他的回答和my answer to another question about the > combinator，我将提供一个插图，经过修改以解决这个问题。

考虑以下 HTML 块，以及您的示例 CSS 选择器。 我使用了一个更详细的示例，以便向您展示两个选择器之间的区别：

<div>
    <p>The first paragraph.</p>                 <!-- [1] -->
    <blockquote>
        <p>A quotation.</p>                     <!-- [2] -->
    </blockquote>
    <div>
        <p>A paragraph after the quotation.</p> <!-- [3] -->
    </div>
</div>

哪些<p>s 被哪些选择器选中？

首先，它们都匹配div p，因为它们是<p> 元素，位于<div> 元素内的任何位置。

这使得div > p 更加具体，这就引出了下一个问题：

div > p选择了哪些<p>s？

1. 已选择

   此段落<p> 是最外层<div> 的子代或直系后代。这意味着它不会立即包含在<div> 之外的任何其他元素中。层次结构与选择器描述的一样简单，因此由div > p 选择。

2. 未选择

   <p> 位于 <blockquote> 元素中，<blockquote> 元素位于最外层的 <div> 中。因此，层次结构如下所示：

   div > blockquote > p
   

   由于段落直接包含在块引用中，它不是由div > p 选择的。但是，它可以匹配 blockquote > p（换句话说，它是 <blockquote> 的子代）。

3. 已选择

   此段落位于内部<div> 中，而外部<div> 则包含它。层次结构如下所示：

   div > div > p
   

   是否有更多的<div>s 相互嵌套，或者即使<div>s 包含在其他元素中也没关系。只要这个段落被自己的<div>直接包含，就会被div > p选中。