В чем разница между селекторами 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.

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

13
css css-selectors html

5 ответов

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

выделить все 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), потому что он выбирает только прямые потомки.

демо

8

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

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

1

корпус 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 как непосредственный родитель

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 будет соответствовать только p С прямым родителем div. Вот так:

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

(Вы заметите, что все соответствует div > p также соответствует div p.)

0