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