CSS 选择器“div p”和“div > p”有什么区别？ [复制]答案

【问题标题】：What’s the difference between the CSS selectors “div p” and “div > p”? [duplicate]CSS 选择器“div p”和“div > p”有什么区别？ [复制]
【发布时间】：2012-07-04 09:48:07
【问题描述】：

可能重复：
Are “div > p” & “div p” same?

Here's我用作CSS参考的页面，请注意我今天早上才开始学习HTML/CSS。

我对引用站点的两个选择器感到困惑，“div p”选择器selects all <p> elements inside <div> elements 和“div > p”选择器selects all <p> elements where the parent is a <div> element。

这两者有什么区别？如果可能的话，这两个选择器不能互换使用的例子会很有帮助。

【问题讨论】：

w3fools.com 但无论如何，> 的意思是直接的后代。

标签： html css css-selectors

【解决方案1】：

div > p 仅选择作为<div> 的直接子级的<p> 元素。

所以：

div > p

将选择此段落：

<div>
    <p>This is a paragraph</p>
</div>

但不会选择此段落：

<div>
    <table>
        <tr>
            <td>
                <p>This will not get selected</p>
            </td>
        </tr>
    </table>
</div>

【讨论】：

实际上，您的第二个示例仍然会被选中，因为它仍然是直接在 <div> 内的 <p>
Welp，这应该可以解决问题... :)
你也用
结束了你的，我会接受这个答案，因为它是最简单的，仍然完全满足问题

看起来有这么多人同时编辑的修订历史问题。 #bug

【解决方案2】：

选择div 内的所有p 标签意味着div 内的所有p 标签... 其中第二个表示p 标签仅比div 低一级.

来自The 30 CSS Selectors you Must Memorize#8：

标准 X Y 和 X > Y 的区别在于后者只会选择直接子代。例如，考虑以下标记。

考虑这个例子：

HTML

<div class="one">
  <p>asdf</p>
  <div>
    <p>asdf</p>
  </div>
</div>

<div class="two">
  <p>asdf</p>
  <div>
    <p>asdf</p>
  </div>
</div>

CSS

div.one p {
  margin: 20px;
  background-color:#F00;
}

div.two > p {
  margin: 20px;
  background-color:#0F0;
}

在第一个中，两个p 标签都将被涂成红色（#F00），因为它选择了div 中的所有p 标签。在第二个中，只有第一个 p 标记将是蓝色的 (#0F0)，因为它只选择直接后代。

DEMO

【讨论】：

你用于演示的那个网站真的很有用

【解决方案3】：

div p 是后代选择器，它将匹配任何在其层次结构中具有更高 div 的 p 元素。使用子选择器的div > p 将只匹配直接父级为div 的p 元素。

http://www.w3.org/TR/CSS2/selector.html#pattern-matching

【讨论】：

【解决方案4】：

案例 1："div p" 表示所有 <p> 都将被选中

<div>
  <p id=1> 
    <p id=2>
      <p id=3></p>
    </p>
  </p>
</div>

案例 2："div > p" 将仅被选中 <p id=1>，即所有 p 标记以 div 作为直接父标记

【讨论】：

这是一个奇怪的例子——你应该让你的例子 HTML 至少大部分是有效的。

【解决方案5】：

div p 将匹配任何p 与祖先div，不必是其父级。所以所有这些都匹配：

<div><p>Matches</p></div>
<div><form><p>Matches</p></form></div>
<div><section><blockquote><p>Matches</p></blockquote></section></div>

div > p 只会将p 与直接父级div 匹配。像这样：

<div><p>Matches</p></div>

（您会注意到div > p 匹配的所有内容也与div p 匹配。）

【讨论】：