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