Возможный дубликат:
Что означает " > " в правилах CSS?
Я наткнулся на многие сайты, и я видел, что многие из них используют этот тип нотации в своем файле css для создания панели навигации, например:
#navigation ul li > ul {
/* some code in between */
}
но когда я опускаю знак > как
#navigation ul li ul {
/* some code in between */
}
это работает по-разному.
какая разница и когда использовать знак >?
> Означает прямой дочерний элемент селектора, поэтому
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
> означает дочерний элемент - это дочерний селектор. То есть, непосредственно/сразу вложенное после.
Итак, в вашем первом примере ul в конце селектора должен быть непосредственно спускается из li.
Синтаксис "li > ul" указывает, что ul должно быть дочерним элементом li. "li ul" вместо этого говорит, что стилизованная ul является потомком li, независимо от того, сколько уровней ниже.
selector[1] > selector[2]{
[property]: value
}
Это называется дочерний селектор. В браузерах, которые его поддерживают, он применяет стили к дочерним элементам selector2 selector1.
Edit:
Второй, который вы используете, я считаю, называется Селекторы потомков.
Они должны работать одинаково, но это немного отличается. Десятичный селектор будет применяться ко всем декодерам, тогда как дочерний селектор применяется только к прямым дочерним элементам родителя.
Вы должны использовать >, если хотите настроить прямой потомок.
Например, .foo > .bar будет нацелен на .bar, только если он является прямым потомком, а .foo .bar будет нацелен на любого потомка .foo, у которого есть класс .bar.
> должен использоваться, когда второй операнд/элемент является дочерним первого операнда/элемента. Когда он опущен; потомки, которые включают в себя дочерние элементы.
Следовательно, если ваш 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
> - это дочерний селектор.
Он будет выбирать только непосредственные дочерние элементы предыдущего элемента. Если это есть
#navigation ul li ul li ul
элемент не будет зависеть от
#navigation ul li > ul
селектора. Но
#navigation ul li ul
будет.
EDIT: @Nix прав, но он не " я говорю всю правду. * Почему не игнорируется p -ключенный ul, а только span -ключенный? display: block vs inline возможно? Кто знает?
Селектор " > " - это селектор дочерних элементов, пробел - селектор потомков. Если 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.