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

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

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

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

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

 
...
...

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

 .outer > div { ... } 

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

 div { border: 1px solid black; padding: 10px; } .outer > div { border: 1px solid orange; } 
 
div.outer - This is the parent.
div.middle - This is an immediate child of "outer". This will receive the orange border.
div.inner - This is an immediate child of "middle". This will not receive the orange border.
div.middle - This is an immediate child of "outer". This will receive the orange border.
div.inner - This is an immediate child of "middle". This will not receive the orange border.

Without Words

...
...

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

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

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

John 1

John 2

John 3 John 4

John 1

John 2

John 3 John 4

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

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

См. Это

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

 
Some text

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

 

Some text

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

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

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

Примеры):

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

 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

Выезд: Селекторы

Interesting Posts
Давайте будем гением компьютера.