less学习三---父选择器

Integ 发布于2019-04-23 13:27 / 3724人阅读

摘要：引用父选择器需要用到符号运算符表示嵌套规则的父选择器，并且在修改类或伪类选择器的应用中非常普遍编译为也可以用在其他场景，例如产生重复的类名编译成编译成编译成还可以改变选择器的顺序，将后置，将当前的选择器提到父级编译为当

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

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

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

云服务器 GPU云服务器华三云服务器的选择选择器派生选择器省市选择器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1895.html

谈谈CSS预处理器

摘要：变量插值预处理器中定义的变量不仅可以用作属性值，还可以用作选择器，属性名等，这就是变量插值。三种预处理器的嵌套语法是一致的，引用父级选择器的标记也相同。三种预处理器的使用方式的差异比较大，下面分别说明。在写CSS的时候我们会发现，为了兼容浏览器等原因，我们往往需要写很多冗余的代码，CSS预处理器就是为了解决CSS的这些问题，简化CSS代码的编写。目前最主流的CSS预处理器是LESS...

BlackMass 2019-08-30 13:12 评论0 收藏0
大话css预编译处理（三）：基础语法篇

摘要：值得庆幸的是，这三款预处理器语言的语法和语法都差不多。在这一节中，我们依次来对比一下这三款预处理器语言各种特性的异同之处，以及使用方法。预处理器语言支持任何变量例如颜色数值文本。一、Sass、LESS和Stylus的语法每一种语言都有自己一定的语法规则，CSS预处理器语言也不例外，在真正使用CSS预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款CSS预...

刘东 2019-08-30 15:55 评论0 收藏0
学习Less-看这篇就够了

摘要：在网上讨论看来，与相比于功能更为丰富，但对于学习成本以及适应时间，稍胜一筹，这也是我选择的原因。如果你也是的使用者，还需要配合进行处理，具体可见我的这篇文章飞行手册，里面详细说明了的处理方式。原文链接前言 CSS的短板作为前端学习者的我们或多或少都要学些 CSS ，它作为前端开发的三大基石之一，时刻引领着 Web 的发展潮向。而 CSS 作为一门标记性语言，可能给初...

hiyayiji 2019-08-29 13:59 评论0 收藏0
前端知识归纳

摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。技能考察：一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和...

sixleaves 2019-08-02 16:13 评论0 收藏0
前端知识归纳

摘要：继承性子标签会继承父标签样式优先级行内样式选择器类选择器标签选择器通配符继承机制创建了的元素中，在垂直方向上的会发生重叠。技能考察：一、关于Html 1、html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 a、理解：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和...

NotFound 2019-08-23 16:53 评论0 收藏0