В чем разница между CSS-селекторами "div p" и "div> p"?

Возможный дубликат:
"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.

В чем разница между этими двумя? Примеры, в которых эти два селектора не могут использоваться взаимозаменяемо, были бы полезны, если это возможно.

Ответ 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>

Ответ 2

Выбор всех тегов p внутри div означает ВСЕ теги p внутри div... где, поскольку второй означает теги p, которые находятся всего на один уровень ниже div.

Из 30 CSS-селекторов, которые вы должны запомнить # 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

Ответ 3

div p - это селектор потомков, он будет соответствовать любым элементам p, которые имеют div выше в своей иерархии. div > p, который использует дочерний селектор, будет соответствовать только элементам p, чей прямой родитель является div.

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 в качестве непосредственного родителя

Ответ 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.)