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;
}

 

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hbahc1j&title=less学习三---父选择器