CSS中伪元素前的“&”是什么意思?


75

在以下来自Twitter Bootstrap的CSS中,“&”字符是什么意思?

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

在Sass and Less中,&是对父选择器的引用。
cimmanon

Answers:


90

那是LESS,不是CSS。

此语法允许您嵌套嵌套选择器修饰符。

.clearfix { 
  &:before {
    content: '';
  }
}

将编译为:

.clearfix:before {
  content: '';
}

使用&,嵌套的选择器将编译为.clearfix:before
没有它,它们就会编译为.clearfix :before


10
@KatieK:Bootstrap用LESS而不是SASS编写
SLaks

20

嵌套&选择SASS和LESS中的父元素。它不仅适用于伪元素,还可以与任何选择器一起使用。

例如

h1 {
    &.class {

    }
}

等效于:

h1.class {

}

1
是的@anthonygore,我同意你的观点。
Ramesh kumar

6

这是一个SCSS / LESS示例:

a {
   text-decoration: underline; 
   @include padding(15px);
   display: inline-block;

     & img  {
                padding-left: 7px;
               margin-top: -4px;
             }
 }

及其等效的CSS:

a {
  text-decoration: underline; 
  @include padding(15px);
  display: inline-block;
}

a img  {
     padding-left: 7px;
     margin-top: -4px;
   }

清晰客观的例子。谢谢!
Magno Alberto
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.