首页 > 文章 > web前端 > CSS 伪元素中的与号 (&) 与 LESS 结合使用有何作用？

CSS 伪元素中的与号 (&) 与 LESS 结合使用有何作用？

What does the ampersand (&) do in CSS pseudo-elements when combined with LESS?

理解 CSS 伪元素中的 & 符号

在 CSS 中，伪元素可用于为元素添加样式，而无需修改 HTML 的内容或结构。当与伪元素结合使用时，与号 (&) 字符有特定用途。

考虑以下 CSS 片段，经常在 Twitter Bootstrap 中看到：

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

在此代码中，与号 (&) 用在伪元素 :before 和 :after 之前。这表明应用于伪元素的样式仅在应用于类为“.clearfix”的父元素时才适用。

需要注意的是，此语法不是 CSS 原生的。它源自 LESS，一个 CSS 预处理器。在 LESS 中，与号 (&) 允许嵌套选择器修饰符。例如：

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

此代码将编译为：

.clearfix:before {
  content: '';
}

与符号 (&) 的存在确保嵌套选择器编译为“.clearfix:before”。如果没有它，生成的代码将是“.clearfix :before”。

总之，当与 LESS 中的伪元素结合使用时，与号 (&) 字符允许选择器修饰符的嵌套，因此提供一种便捷的方式将样式专门应用于给定元素的后代。

以上是CSS 伪元素中的与号 (&) 与 LESS 结合使用有何作用？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

查看更多