less巢狀規則

巢狀語法

優先順序：偽類

指令巢狀

html

css

#container #container .left, #container .center, #container .right #container .left #container .center #container .right

將css的樣式改為使用less來寫的話，是這樣的：

#container 
.left 
.center 
.right 
}

很明顯，使用less來寫的話，**是比較少，並且是比較清晰的，它編譯之後，效果是跟前面的css寫法一樣的。

如果相同的class類名的不同元素，在不同的位置時（乙個是父元素的子元素，另乙個是父元素的兄弟元素），這樣的情況下，

子元素裡面定義的樣式不會被應用到父元素的兄弟元素；

兄弟元素的樣式會被應用到父元素的子元素，但前提是父元素的子元素沒有該屬性的時候才會被應用，如果它自己有該屬性，則它自己的屬性優先順序比較高。

這樣說不知道能不能被理解，用實際**看看吧：

#container 
}.center

效果如下：

container的裡邊的center本身是沒有寫border屬性的，但是它被外面的center汙染到了。它們相同的部分，container裡邊的center會使用它自己的，而且外面的無法使用（即使外層的center沒有該屬性，也不會被裡層的汙染）。

如果要新增hover或者其它偽類，可以這樣寫：

&:hover

如果加上&識別符號，代表繫結到父元素裡，如果不帶&識別符號，則繫結到所有子元素裡。拿上面的例子來說，看看實際寫法：

#container .left .center .right // 這樣寫是給container繫結了hover效果 &:hover // 這樣寫是給container的所有子元素繫結了hover效果 :hover

}

什麼是指令？

如：@media、@keyframe之類的css指令

巢狀方法（@media）：

html

less

.container 
@media (min-width: 600px) }}

這裡所寫的less，相當於下面的css:

.container 
@media screen and (max-width: 300px) 
}@media screen and (min-width: 600px) 
}

如果巢狀裡面有非指令的屬性，會被忽略。