Когда использовать `>` знак в CSS?

Ответ 1

> Означает прямой дочерний элемент селектора, поэтому

li > a будет ТОЛЬКО соответствовать <a>, который находится непосредственно внутри <li>, например.

Если html был <li><span><a>, <a> не будет соответствовать.

Удаление > будет соответствовать любому <a>, вложенному внутри <li>, независимо от других вещей вокруг него, поэтому li a будет соответствовать <a> в

<li><a>, но также в <li><span><a>, например.

Здесь больше информации о прямых дочерних селекторах: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

Ответ 2

> означает дочерний элемент - это дочерний селектор. То есть, непосредственно/сразу вложенное после.

Итак, в вашем первом примере ul в конце селектора должен быть непосредственно спускается из li.

Ответ 3

Синтаксис "li > ul" указывает, что ul должно быть дочерним элементом li. "li ul" вместо этого говорит, что стилизованная ul является потомком li, независимо от того, сколько уровней ниже.

Ответ 4

selector[1] > selector[2]{ 
[property]: value 
}

Это называется дочерний селектор. В браузерах, которые его поддерживают, он применяет стили к дочерним элементам selector2 selector1.

Edit:
Второй, который вы используете, я считаю, называется Селекторы потомков.

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

Ответ 5

Вы должны использовать >, если хотите настроить прямой потомок.

Например, .foo > .bar будет нацелен на .bar, только если он является прямым потомком, а .foo .bar будет нацелен на любого потомка .foo, у которого есть класс .bar.

Ответ 6

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

Следовательно, если ваш HTML структурирован так, как вы предложили (#navigation ul li ul), то если в вашем CSS есть следующее:

#navigation ul {color:red;}

Затем оба #navigation ul AND #navigation ul li ul будут окрашены в красный цвет (текст), поскольку они BOTH являются потомками of #navigation ul.

Но если в вашем CSS было следующее:

#navigation > ul {color:red;}

Тогда только #navigation ul будет окрашен в красный цвет, поскольку он является единственным ul, являющимся прямым дочерним элементом #navigation

Ответ 7

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

Он будет выбирать только непосредственные дочерние элементы предыдущего элемента. Если это есть

#navigation ul li ul li ul

элемент не будет зависеть от

#navigation ul li > ul

селектора. Но

#navigation ul li ul

будет.

EDIT: @Nix прав, но он не " я говорю всю правду. * Почему не игнорируется p -ключенный ul, а только span -ключенный? display: block vs inline возможно? Кто знает?

Ответ 8

Селектор " > " - это селектор дочерних элементов, пробел - селектор потомков. Если tag3 находится внутри tag2, который находится внутри tag1, и вы используете дочерний селектор, тогда ваше правило css не будет применяться к tag3, если вы ссылаетесь на tag3 внутри tag1, однако, если вы используете селектор потомков, tag3 будет транзитно внутри tag1. Это означает, что селектор потомков более общий, чем дочерний селектор.

#navigation ul li > ul {
  /* some code in between */
}

более конкретна, чем

#navigation ul li ul {
  /* some code in between */
}

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