Was bedeutet ein "&" vor einem Pseudoelement in CSS?

Question

In der folgenden CSS aus Twitter Bootstrap Was bedeutet das kaufmännische Und (&) Zeichen?

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

Answer 1

Das ist LESS, nicht CSS.

Mit dieser Syntax können Sie Modifikatoren für den Nestnotenselektor definieren.

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

Will kompilieren:

.clearfix:before { 
    content: ''; 
} 

Mit dem &, die verschachtelten Selektoren .clearfix:before kompilieren.
Ohne es kompilieren sie zu .clearfix :before.

Answer 2

Ein verschachteltes & wählt das übergeordnete Element sowohl in SASS als auch in LESS aus. Es ist nicht nur für Pseudo-Elemente, es kann mit jeder Art von Selektor verwendet werden.

z.B.

h1 { 
    &.class { 

    } 
} 

entspricht:

h1.class { 

} 

Answer 3

In SCSS & LESS 

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

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


is Equal to in CSS : 

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

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