当与 CSS 伪元素一起使用时，与号 (&) 在 LESS 中如何工作？

CSS 伪元素中的 & 符号：A LESS Trick

在 CSS 中，& 符号通常与伪元素结合使用，例如：之前和之后。然而，在 Twitter Bootstrap 提供的示例中，& 符号的使用方式略有不同。

有问题的语法是：

<code class="css">.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}</code>

经过仔细检查，我们意识到这是不是纯粹的 CSS，而是 LESS，一个流行的 CSS 预处理器。在 LESS 中，& 符号允许选择器嵌套。通过在伪元素前面加上父选择器 (&)，我们可以实现以下效果：

<code class="less">.clearfix {
  &:before {
    content: '';
  }
}</code>

这将编译为：

<code class="css">.clearfix:before {
  content: '';
}</code>

如果没有＆符号，选择器将编译到 .clearfix :before，这不是有效的 CSS 语法。因此，在 LESS 中，& 符号用于嵌套选择器修饰符，从而使代码更加简洁和可读。

以上是当与 CSS 伪元素一起使用时，与号 (&) 在 LESS 中如何工作？的详细内容。更多信息请关注PHP中文网其他相关文章！