嵌套规则



嵌套规则


他模仿了HTML的结构,让我们的css代码更加简洁明了清晰。下面是传统的css写法和less写法的对比:


传统写法


header{
  width: 960px;
}
header h1 {
  font-size: 18px;
  color: green;
}

 

less写法


header{
  width: 960px;
  h1{
    font-size: 18px;
    color: green;
  }
  .logo{
    width: 300px;
    height: 150px;
    background: darkred;
     }
}


效果图


less1.png 

从这里可以看出,无论是css还是less在编写的时候也要规范的书写

 


父元素选择器


&表示当前选择器的所有父选择器。下面是两种写法的对比。

 

Css写法如下


header .logo{
 width: 300px;
  height: 150px;
  background: darkred;
}
header .logo:hover{
  background: forestgreen;
}


less写法如下


.logo{
    width: 300px;
    height: 150px;
    background: darkred;

           &:hover{
           background: forestgreen;

     }
}

 


改变选择器的顺序


将&放到当前选择器之后,就会将当前选择器插入到所有的父选择器之前。

两种写法的对比:


① .a{
  .b{
    .c{
      color: 123;
    }
  }
}



② .a{
  .b{
    .c&{
      color: 123;
    }
  }
}


它们的编译结果是:

 

① .a .b .c {
  color: 123;
}

②.c.a .b {
  color: 123;
}

 

组合使用生成所有可能的选择器列表,例子如下:


p, a, ul, li {
  border-top: 2px dotted #366;
  &   & {
    border-top: 0;
  }
}


其css编译后文件为:


p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
  border-top: 0;
}

这里的意思是指:将所有可能的组合都列出来。

 


【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

有一位课程导师想与你聊聊

客服热线 400-862-8862

回到顶部