在使用標準css時，要為多層巢狀的元素定義樣式，要麼使用後代選擇器從外到內的巢狀定義，要麼給這個元素加上類名或 id 來定義。這樣的寫法雖然很好理解，但維護起來很不方便，因為無法清晰了解到樣式之間的關係。
在less中，巢狀規則使這個問題迎刃而解。巢狀規則允許在乙個選擇器中巢狀另乙個選擇器，這更容易設計出精簡的**，並且樣式之間的關係一目了然。假設以下html **片段：
學web開發，就到歪脖網！
less**可以這樣寫：
header
}
}
p
}
}
這難道不就是dom的寫法嗎？說實話，當你第一眼看到這種寫法，你就會情不自禁地愛上less。這種寫法減了選擇器的層級關係，使**的結構非常清晰，無論是閱讀、還是後期維護都是那麼自然，是不是有一種本來就該如此的感覺？
在使用巢狀規則時，需要特別注意 & 符號。內層選擇器前面的 & 符號就表示對父選擇器的引用。在乙個內層選擇器的前面，如果沒有 & 符號，則它被解析為父選擇器的後代；如果有 & 符號，它就被解析為父元素自身或父元素的偽類。
比如，上述**中，由於選擇器 h1 前面沒有 & 符號，則 h1 被解析為 header 選擇器的後代，即 header h1；而 :hover 和 .slogan 前面有 & 符號，& 符號表示對父選擇器的引用，則 &.slogan 表示父元素自身，&:hover 表示父元素的偽類，解析結果為 a:hover 和 p.slogan。編譯後的css**為：
header h1
header h1 a
header h1 a:hover
header p
header p.slogan
事實上，父選擇器運算子 & 的作用，就是讓當前的選擇器和父級選擇器，按照特定的規則進行連線。它有多種用途，比如建立重複的類名：
.button
&-cancel
&-custom
}
編譯後的css**為：
.button-ok
.button-cancel
.button-custom
在乙個選擇器中，& 可以重複出現多次，這樣，就可以多次引用父選擇器而不必重複它的名字。如：
.link
&&
&&
&,&ish
}
編譯後的css**為：
.link +.link
.link .link
.link.link
.link,.linkish
需要注意的是所有的父選擇器，而不是僅僅重複最近的祖先選擇器。請看以下例子：
.grand
&&
&&
&,&ish
}
}
編譯後的css**為：
.grand .parent >.grand .parent
.grand .parent .grand .parent
.grand .parent.grand .parent
.grand .parent,
.grand .parentish
還可以將 & 放在乙個選擇器的後面，來改變選擇器的順序，將當前選擇器排列到最前面。如：
.header
}
}
選擇器 .no-borderradius & 會使 .no-borderradius 置於他的父選擇器 .header .menu 的前面，形成 .no-borderradius .header .menu的結構。編譯後的css**為：
.header .menu
.no-borderradius .header .menu
將 & 用在乙個使用逗號分隔的選擇器列表中，可以產生列表中所有選擇器的所有可能的排列，這被稱作組合**。如：
p,a,ul,li
}
上述列表中有 4 個選擇器，列表中所有選擇器的所有可能的排列，將有 16 種可能。編譯後的css**為：
p,
a,
ul,
li
p +p,
p +a,
p +ul,
p +li,
a +p,
a +a,
a +ul,
a +li,
ul +p,
ul +a,
ul +ul,
ul +li,
li +p,
li +a,
li +ul,
li +li
less巢狀規則
目錄 巢狀語法 優先順序 偽類 指令巢狀 html css container container left,container center,container right container left container center container right 將css的樣式改為使用les...
less 的幾個規則
1.變數的延遲載入 var 0 class one var 1 2.混合就是將一系列屬性從乙個規則集引入到另乙個規則集的方式 變數使用 定義 yanse b,w 10px,c red yanse a,w 10px,c red inner inner2 inner3 3.計算 div 4.繼承繼承被附...
HTML的巢狀規則
塊元素 block 一般用來搭建 架構 布局 承載內容 像這些大體力活都屬於塊級元素的。行元素 inline 一般用在 內容之中的某些細節或部位，用以 強調 區分樣式 上標 下標 錨點 等等。1 form表單不能直接包含input元素。原因在於input屬於行內元素，form只能包含塊元素。2 不能...