引用父選擇器需要用到“&”符號
＆運算符表示嵌套規則的父選擇器，并且在修改類或偽類選擇器的應用中非常普遍
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;
}?
本文轉載于:猿2048https://www.mk2048.com/blog/blog.php?id=hbahc1j&title=less學習三---父選擇器
