less学习三---父选择器

引用父选择器需要用到“&”符号

＆运算符表示嵌套规则的父选择器，并且在修改类或伪类选择器的应用中非常普遍

ul{li{&:nth-child(2) a {color: red;&:hover {color: yellow;}}}
}//编译为
ul li:nth-child(2) a {color: red;
}
ul li:nth-child(2) a:hover {color: yellow;
}

&也可以用在其他场景，例如产生重复的类名

.button{&-submit{color:blue;}&-click{color:yellow;}&-btn{color:red;}
}
//编译成
.button-submit {color: blue;
}
.button-click {color: yellow;
}
.button-btn {color: red;
}

.item{
 &1{
 color:green;
 }
 &2{
 color:red;
 }
}

//编译成

.item1 {
  color: green;
}
.item2 {
 color: red;
}

.header{&>p{color:red;}& .content{color:yellow;}& div{color:red;}&~p{color:green;}&&{color:green;}&>&{color:blue;}
}
//编译成
.header > p {color: red;
}
.header   .content {color: yellow;
}
.header div {color: red;
}
.header ~ p {color: green;
}
.header.header {color: green;
}
.header > .header {color: blue;
}

还可以改变选择器的顺序，将&后置，将当前的选择器提到父级

.side{div&{color:cyan;}
}
#side{div&{color:green;}
}ul{li{.item{div &{color:orange;}}}
}
／／　编译为
div.side {color: cyan;
}
div#side {color: green;
}
div ul li .item {color: orange;
}

当多个同级选择器用“，”隔开时，其子级使用连续多个&时，例如& &或&-&等，会生成所有可能的组合

div,p,a,li{& &{color:red;}
}//编译为
div   div,
div   p,
div   a,
div   li,
p   div,
p   p,
p   a,
p   li,
a   div,
a   p,
a   a,
a   li,
li   div,
li   p,
li   a,
li   li {color: red;
}