多个 :before 伪元素可以应用于单个 HTML 元素吗？

多个 :before 伪元素：限制概述

问题：

可以多个:before 伪元素应用于单个 HTML元素？

答案：

不幸的是，CSS2.1 中同一个元素不可能有多个 :before 伪元素。一个元素一次只能有任意一种伪元素之一，包括 :before 和 :after。

说明：

当多个 :before 规则应用时对于同一元素，它们级联并合并为单个 :before 伪元素。只有具有最高优先级的最顶层规则才会应用其声明。这与常规 CSS 属性的级联工作方式一致。

因此，在您的示例中：

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

仅应用第二条规则，输出将为：

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

替代方法：

克服这个问题限制，您可以：

• 将多个规则组合到一个选择器中，例如 .circle.now:before，这会将两个规则应用于元素。
• 使用 CSS像 Sass 或 Less 这样的预处理器，它允许您嵌套选择器并为同一元素创建多个 :before 伪元素。

以上是多个 :before 伪元素可以应用于单个 HTML 元素吗？的详细内容。更多信息请关注PHP中文网其他相关文章！