Question

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

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

我对两个选择器感到困惑，引用了网站，＆＃34; div p＆＃34;选择器selects all <p> elements inside <div> elements和＆＃34; div＆gt; P＆＃34;选择器selects all <p> elements where the parent is a <div> element。

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

Answer 1

div > p仅选择<p>的直接子项<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>

Answer 2

选择p内的所有div代码表示p内的所有div代码...其中第二个代表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），因为它会选择p中的所有div标记。在第二个中，只有第一个p标记为蓝色（#0F0），因为它只选择直接后代。

DEMO

Answer 3

div p是后代选择器，它将匹配层次结构中p更高的div个元素。使用子选择器的div > p仅匹配直接父级为p的{{1}}个元素。

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

Answer 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作为直接父母

Answer 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匹配。）

CSS选择器“div p”和“div＆gt;之间有什么区别？ P”？

5 个答案: