it-swarm.com.ru

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

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

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

531
Bojangles

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

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

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

и вы объявляете правило CSS в своей таблице стилей следующим образом:

.outer > div {
    ...
}

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

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>

Примечание

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

ПРИМЕЧАНИЕ. Селектор > не поддерживается IE6. Это работает во всех других современных браузерах, включая IE7 и IE8.

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

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

717
Spudley

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

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

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>
202
Adam Kiss

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

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

Смотрите это

10
dheerosaur

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

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

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

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

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

8
Nathan MacInnes

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

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

3
David Mårtensson

Это Детский Селектор.

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

Примеры):

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

body > P { line-height: 1.3 }

Примеры):

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

div ol>li p

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

3
Margarez