CSS '>' селектор; что это?

Ответ 1

> выбирает непосредственных детей

Например, если у вас есть вложенные divs такие как:

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

и вы объявляете правило css в своей таблице стилей, например:

.outer > div {
    ...
}

ваши правила будут применяться только к тем divs, которые имеют класс "средний", поскольку эти divs являются прямыми потомками (непосредственными дочерними элементами) элементов с классом "внешний" (если, конечно, вы не объявляете другие, более конкретные правила, переопределяющие эти правила). См. Скрипку.

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}

<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

Ответ 2

> выбирает всех прямых потомков/детей

Селектор пробела выберет все глубокие потомки, тогда как селектор больше > будет выбирать только все непосредственные потомки. Например, смотрите скрипку.

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */

<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

Ответ 3

Это селектор дочерних элементов CSS. Пример:

div > p выбирает все абзацы, которые являются прямыми дочерними элементами div.

См. this

Ответ 4

Как говорили другие, это прямой ребенок, но стоит отметить, что это отличается от того, чтобы просто оставить пространство... пространство для любого потомка.

<div>
  <span>Some text</span>
</div>

div>span будет соответствовать этому, но это не соответствует этому:

<div>
  <p><span>Some text</span></p>
</div>

Чтобы соответствовать этому, вы можете сделать div>p>span или div span.

Ответ 5

Он объявляет родительскую ссылку, посмотрите на эту страницу для определения:

http://www.w3.org/TR/CSS2/selector.html#child-selectors

Ответ 6

Это дочерний селектор.

Он совпадает, когда элемент является дочерним элементом какого-либо элемента. Он состоит из двух или более селекторов, разделенных символом " > ".

Пример (ы):

Следующее правило устанавливает стиль всех элементов P, которые являются дочерними элементами BODY:

body > P { line-height: 1.3 }

Пример (ы):

Следующий пример объединяет селектор потомков и дочерние селектора:

div ol>li p

Он соответствует элементу P, являющемуся потомком LI; элемент LI должен быть дочерним элементом OL; элемент OL должен быть потомком DIV. Обратите внимание, что необязательное белое пространство вокруг комбинатора " > " было опущено.

Ответ 7

Это означает родительский/дочерний

Пример:

HTML > Тело

говорящий, что тело является дочерним элементом html

Отъезд: Селекторы