Селектор CSS'>'; что это? [дубликат]

Возможные Дубликаты:
что означает " > " в правилах CSS?

Я видел "больше чем" (>) используется в коде CSS несколько раз, но я не могу понять, что он делает. Что он делает?

7 ответов


> выбирает ближайших детей

например, если у вас есть вложенные 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>

Примечание

если вы, напротив, имел место между селекторами вместо >, ваши правила будут применяться к обоим вложенным divs. Пространство гораздо чаще используется и определяет "селектор потомков", что означает, что он ищет любой соответствующий элемент в дереве, а не только непосредственные потомки как > делает.

Примечание:> селектор не поддерживается по IE6. Он работает во всех других текущих браузерах, включая IE7 и IE8.

если вы смотрите на менее хорошо используемые селекторы CSS, вы также можете посмотреть на +, ~ и [attr] селекторы, которые могут быть очень полезны.

на этой странице имеет полный список всех доступных селекторов, а также подробную информацию об их поддержке в различных браузерах (в основном IE, который имеет проблемы) и хорошие примеры их использования.


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

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

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>

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

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

посмотреть этой


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

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

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

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

чтобы соответствовать, что вы могли бы сделать div>p>span или div span.


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

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

пример(ы):

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

body > P { line-height: 1.3 }

пример(ы):

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

div ol>li p

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


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

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


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

пример:

html>тело

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

Проверьте: селекторы