CSS中&:before的用法、本质及与::before的差异解析

问题代码 #

.coloring {
  &:before {
    background: "black";
  }
}

问题拆解与解答 #

• &:before既不是CSS内置类，也不是自定义类：
  这段代码是Sass/Less这类CSS预处理器的语法，并非原生CSS。其中&是预处理器的特殊符号，代表父选择器（这里就是.coloring）；:before是CSS原生的伪元素，用于在目标元素的内容前插入虚拟内容，它不属于类选择器的范畴。

• 此处的&是必需的：
  如果去掉&，预处理器会编译成.coloring :before（后代选择器，匹配.coloring内部元素的:before伪元素），但我们需要的是.coloring:before（直接匹配.coloring自身的:before伪元素），所以必须通过&来关联父选择器和伪元素。

• 关于:before和::before的区别：
  ::before是CSS3规范中定义伪元素的写法，用双冒号区分伪元素（如::before、::after）和伪类（如:hover、:active）；:before是CSS2的旧写法，目前主流浏览器都兼容两种写法，但推荐遵循CSS3规范使用双冒号::before。

内容的提问来源于stack exchange，提问作者naya khattar