less学习三---父选择器

2018-08-26 17:22:16来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

引用父选择器需要用到“&”符号

&运算符表示嵌套规则的父选择器,并且在修改类或伪类选择器的应用中非常普遍

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端的学习之旅

下一篇:关于假链接