## 嵌套 ### 嵌套的規則 ~~~ #header{ &:after{ content:"hello less"; } .title{ font-weight:bold; } &_content{ margin:20px; } } ~~~ 等同于css ~~~ #header:after{ content:"Less is more!"; } #header .title{ //嵌套了 font-weight:bold; } #header_content{//沒有嵌套！ margin:20px; } ~~~ ### 從上面的示范中可以看到三種嵌套方式 1.&的嵌套 ~~~ &指代父級選擇器 div { &:hover{ color:red; } } div { &>a{ color:black; } } ~~~ 等同于css ~~~ div:hover{ color:red; } div>a{ color:black; } ~~~ 2.層級嵌套 ~~~ div { span { color:red; } } div { p { span { color:black; } } } ~~~ 等同于css ~~~ div span { color:red; } div p span { color:black; } ~~~ 3.字符銜接嵌套 ~~~ .news { &-title{ color:red } &-content{ color:blue; } } ~~~ 等同于css ~~~ .news-title{ color:red; } .news-content{ color:blue; } ~~~ ### 課后習題 用less語法改寫下面的css樣式: ~~~ .aa .bb .cc>.dd { color:red; } a { color:yellow } a:hover{ cursor:pointer; } a .q { color:black; } ~~~