15

可能重复：
“div > p”和“div p”是否相同？

这是我用作 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。

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

4

5 回答 5

27

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

所以：

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>
于 2012-07-03T23:41:19.830 回答
8

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

来自你必须记住的 30 个 CSS 选择器#8：

标准 XY 和 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)，因为它选择p了div. 在第二个中，只有第一个p标记将是蓝色 ( #0F0)，因为它只选择直接后代。

演示

于 2012-07-03T23:38:51.630 回答
1

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

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

于 2012-07-03T23:41:11.017 回答
0

案例 1："div p"意味着所有的<p>'s 将被选中

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

情况 2："div > p"仅<p id=1>将被选中，即所有p标签都div作为直接父级

于 2012-07-03T23:42:43.030 回答
0

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只会将 ap与直接父级匹配div。像这样：

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

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

于 2012-07-03T23:44:10.677 回答