Проблемы с наследованием при использовании Less?

Question

Я попытался реализовать следующее за меньшее:

nav > ul > li:first-child

используя:

nav {   
      ul {
          li:first-child {

Однако результат был:

nav ul li:first-child

Может кто-нибудь объяснитьРазница между двумя результатами CSS, а также скажите мне, как я могу использовать меньше, чтобы получить результат "nav> ul> li: first-child"

Answer 1

> называется дочерним комбинатором.

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

<div id="level-1">
  <div id="level-2">
     <div class="level-3"></div>
     <div class="level-3"></div>
  </div>
</div>

#level-1 > div{} /* <- matches #level-2 div */
#level-1 div{}   /* <-matches #level-2 and both .level-3 divs */

для уточнения я добавил Скрипка .

что касается sass, вы можете использовать:

#level-1{
    > div{
    }
}

Answer 2

Обычная операция в CSS - «потомок».Это то, что меньше дает вам, когда вы не заявляете о других отношениях.Как и в этом случае, «потомок»:

nav {   
    > ul {
        > li:first-child {

или «следующий родной брат»:

nav {   
    + ul {
        + li:first-child {