Less 嵌套

本節我們學習 less 中的嵌套，嵌套應該很容易了解，html 語言中就支援标簽的嵌套。我們在使用 css 時，如果想要為多層嵌套的元素設定樣式，要麼給元素加上一個類選擇器或id選擇器，要麼使用後代選擇器。例如：

這樣寫雖然也好了解，但是沒有那麼直覺，維護起來也不友善。

而 less 中的嵌套規則正好可以解決這樣問題，嵌套規則允許在一個選擇器中嵌套另一個選擇器，這樣可以使得代碼看起來一目了然，後期維護也友善。

例如上面的 css 代碼使用 less 語言來寫：

這樣整體看起來是不是更直覺一些，一層套一層。但是注意喲，一般我們不會嵌套太多層，嵌套的層數越多，性能就越差，建議一般嵌套三層左右。

在我們使用嵌套規則時，要特别注意 & 符号的使用，& 符号可以表示對父選擇器的引用。

在一個内層選擇器的前面，如果沒有 & 符号，則這個内層選擇器會被解析為父選擇器的後代。如果内層選擇器前面有一個 & 符号，則内層選擇器會被解析為父選擇器自身或父選擇器的僞類。

例如我們看下面這段代碼：

編譯成 css 代碼：

可以看到，标簽選擇器 a 前面沒有加 & 符号，是以這個标簽選擇器 a 被解析為 .xkd 選擇器的後代。

再來看一下内層選擇器前面加 & 符号：

上面代碼中，one 前面添加了一個 & 符号，這個符号就表示父選擇器本身，是以解析後為.xkdone。當然 :hover 僞類前面的 & 符号也是同理。

通過使用 & 符号，可以重複引用父類選擇器。

例如下面這段 less 代碼，如果我們希望每個選擇器名的字首都為 top，可以像下面這樣簡寫：

編譯為 css 代碼：

除此之外，還可以同時使用多個 & 符号，并使用其他運算符連接配接起來：

什麼是更改選擇器順序呢，就是有些時候可能需要将内層選擇器放在父選擇器之前，此時我們可以将 & 放在目前選擇器後面來完成。

例如下面這段代碼，我們希望 .xkd 選擇器位于 .nav 選擇器之前，可以在 .xkd 選擇器的後面加一個 & 符号：

可以看到，編譯之後的 css 代碼中 .xkd 選擇器位于 .nav 選擇器前面。