## 嵌套 ### 嵌套的规则 ~~~ #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; } ~~~