"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

佩卡在他的回答中在理论上对此进行了解释.根据他的回答和我对另一个关于>组合子的问题的回答,我将提供一个例子,经过修改以解决这个问题.

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