CSS中伪元素前的“&”是啥意思？

Posted 2023-03-06

【中文标题】CSS中伪元素前的“&”是啥意思？

【英文标题】：What does an "&" before a pseudo element in CSS mean?CSS中伪元素前的“&”是什么意思？

【发布时间】：2012-11-16 12:39:28

【问题描述】：

在以下取自 Twitter Bootstrap 的 CSS 中，和号 (&) 字符是什么意思？

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

【问题讨论】：

在 Sass 和 Less 中，& 是对父选择器的引用。

【参考方案1】：

那是LESS，不是 CSS。

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

.clearfix  
  &:before 
    content: '';
  

将编译为：

.clearfix:before 
  content: '';

使用&，嵌套选择器编译为.clearfix:before。 没有它，它们将编译为.clearfix :before。

【讨论】：

@KatieK：Bootstrap 是用 LESS 编写的，而不是 SASS

【参考方案2】：

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

例如

h1 
    &.class 

    

相当于：

h1.class 

【参考方案3】：

这是一个 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;
   

【参考方案4】：

'&' 在 Sass 和 Less 预处理器中都是有用的功能。用于嵌套。与 CSS 相比，它更节省时间。