引用父选择器需要用到“&”符号
＆运算符表示嵌套规则的父选择器，并且在修改类或伪类选择器的应用中非常普遍
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;
}