“ 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

影响孙子，孙子等。 也是。 （在您的示例中不会有所作为）

儿童选择器 IE6不支持.

Answer 2

Pekka从理论上解释了 他的回答. 。根据他的回答， 我对另一个问题的回答 > 组合器, ，我将提供一个插图，以解决此问题。

考虑以下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>选择哪个选择器？

首先， 他们都匹配了 div p 因为他们是 <p> 元素位于 内部的任何地方 一个 <div> 元素。

这使得 div > p 更具体的是，这是一个问题：

哪个 <p>S选择 div > p?

1. 选定

   本段 <p> 是最外面的孩子，或直接后代 <div>. 。这意味着除了一个以外的其他元素，它没有立即包含 <div>. 。层次结构与选择器所描述的一样简单，因此是由 div > p.

2. 未选中的

   这个 <p> 在一个 <blockquote> 元素和 <blockquote> 元素在最外面发现 <div>. 。因此，层次结构看起来像这样：

   div > blockquote > p
   

   由于该段落直接由blockquote包含，因此 不是 选择 div > p. 。但是，它 能够 匹配 blockquote > p （换句话说，这是一个孩子 <blockquote>).

3. 选定

   这段生活在内在 <div>, ，外部包含 <div>. 。层次结构看起来像这样：

   div > div > p
   

   是否有更多 <div>S相互嵌套，甚至 <div>S包含其他元素。只要本段直接包含 <div>, ，将通过 div > p.