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>？

首先，所有这些都与div p 匹配，因为它们是 {/ 1}元素 <p>元素内的<div>个元素。< / p>

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

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

<强>选择的

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

此<p>位于<blockquote>元素中，<blockquote>元素位于最外层<div>。层次结构看起来像这样：
```
div > blockquote > p
```
由于段落直接包含在段落引用中，因此div > p选择了。但是，它可以匹配blockquote > p（换句话说，它是<blockquote>的孩子。）
<强>选择的

此段位于内<div>内，<div>包含外div > div > p。层次结构如下所示：
```
<div>
```
如果有更多<div> s彼此嵌套，或者即使其他元素包含<div>，也无关紧要。只要此段落由其自己的div > p直接包含，它就会被{{1}}选中。

是“div＆gt; p”＆amp; “div p”一样吗？

2 个答案: