less學習三—父選擇器

牛坤發表於2018-08-23

引用父選擇器需要用到“&”符號

＆運算子表示巢狀規則的父選擇器，並且在修改類或偽類選擇器的應用中非常普遍

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

 

相關文章