首页 > > 网页制作 > css >

less学习三---父选择器

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

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

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

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