一个元素上可以有多个 :before 伪元素吗？

多个 :before 伪元素

一个元素可以拥有多个 :before 伪元素吗？使用 jQuery 将样式应用于同一元素时会出现此问题，其中似乎只有最新的样式才会生效。

CSS2.1 限制

在 CSS2.1 中，一个元素在任何给定时间只能有一个特定类型的伪元素。因此，一个元素可以同时具有 :before 和 :after 伪元素，但每个伪元素不能超过一个。

级联行为

多个 :before 规则相同的元素被级联并应用于单个 :before 伪元素。优先级最高的规则（通常是最后一个）优先。在提供的示例中：

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

仅应用最后一条规则“Now”中的内容声明。其余声明将被丢弃，与普通元素属性类似。

组合选择器

如果多个选择器匹配同一个元素并且您希望应用它们的所有样式，请生成额外的具有组合选择器的 CSS 规则。对于给定的示例，这将是 .circle.now:before 或 .now.circle:before。

旧版 CSS3 内容规范

已弃用的 css3 内容规范建议使用一种符号来插入多个与 CSS2.1 级联兼容的 ::before 和 ::after 伪元素。不过，此功能已过时，尚未被任何浏览器实现。

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