字符'>'和'＆'在bootstrap less模塊​​中意味着什麼？

Question

我對bootstrap很新，我想定製它。當我看到'>'和'&'字符時，我很困惑。那是什麼意思？是否存在較少的文檔。這是一種嵌套？請參閱下面的示例代碼。

.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將針對這兩個 「B」 和「C 」。

---

至於&字符LESS：

施加改性類或僞類到現有的選擇器時，符號選擇器是最常用的：

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

的本例中的內部選擇器編譯爲：懸停。如果沒有&，它將編譯爲：hover（與標籤內部的懸停元素匹配的後代選擇器）。

閱讀更多在http://blog.slaks.net/2013-09-29/less-css-secrets-of-the-ampersand/

Answer 2

>字符是指某些元素的直接子代。

&字符在SASS中用於reference of the parent selectors。