“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 

影响孙子，grandgrandchildren等为好。（在你的例子中没有什么不同）

子选择器isn't supported by IE6。

Answer 2

佩卡在理论上已经在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，因为它们是内一个<div>元件的任何地方位于<p>元件。

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

哪些<p> S被div > p选择？

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>小号相互嵌套不要紧，或者即使<div> S被其他元素包含。只要本段由其自己的<div>直接包含，它将由div > p选择。