您可以将多个 :before 伪元素应用于同一元素吗？

同一个元素可以存在多个:before伪元素吗？

问题：

是否可以将多个 :before 伪元素应用于同一个元素？例如：

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

答案：

不可以，CSS2.1规定一个元素在任何给定时间只能有任意种类的伪元素之一。这意味着虽然一个元素可以同时拥有 :before 和 :after 伪元素，但每种类型不能拥有多个。

因此，当多个 :before 规则针对同一元素时，它们级联成单个 :before 伪元素。例如，上面的代码折叠为：

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

只有具有最高优先级的最后一个内容声明才会生效。

解决方法：

如果你想对同一个元素应用多个 :before 伪元素，你可以使用组合选择器来准确指定浏览器应该执行的操作 做。例如：

.circle.now:before {
    content: "○";
}
.circle.now:hover:before {
    background: #ccc;
}

这将创建两个具有不同内容和样式的 :before 伪元素。

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