Что означают символы '>' и '&' в бутстрапе меньше модулей?

Question

Я очень новичок в бутстрапе, и я хотел бы его настроить. Я смущен, когда вижу символ '>' и '&'. Что это значит? Это присутствует в меньшей документации. Это что-то вроде гнездования? См. Пример кода ниже.

.navbar-nav { 
    > .open > a { 
     &, 
     &:hover, 
     &:focus { 
     background-color: @navbar-inverse-link-active-bg; 
     color: @navbar-inverse-link-active-color; 
     } 
    } 

Это может быть самый простой вопрос, не ненавидьте меня за это. Спасибо, ребята.

Answer 1

В CSS символ «>» означает, что будут нацелены только «первые вложенные» элементы («прямые дочерние» элементы).

это означает, что в следующем сценарии:

<div id="a"> 
     <div id="b"> 
      <div id="c"> 
      </div> 
     </div> 
    </div> 

затем в CSS #a > div будет предназначаться только <div id="b"> и НЕ<div id="c">

без > характера, #a div будет предназначаться как «б» и «в ».

---

Что касается характера & в МЕНЬШЕ:

Селектор амперсанд наиболее часто используется при применении класс модифицирующее или псевдо-класс к существующему селектору:

a { 
    color: blue; 
    &:hover { 
     color: green; 
    } 
} 

внутренний селектор в этом примере компилируется в: hover. Без & он будет скомпилирован с помощью: hover (селектор потомков, который соответствует зависающим элементам внутри тегов).

Подробнее на http://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/

Answer 2

Символ > относится к прямым детям определенного элемента.

Символ & используется в SASS для reference of the parent selectors.