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

同一元素的多个 :before 伪元素

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

考虑以下场景：

<p>Is it possible to have multiple :before pseudos for the same element?</p>

<pre class="brush:php;toolbar:false">.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

I am trying to apply the above styles to the same element using jQuery, but only the most recent one is applied, never both of them.

在 CSS2.1 中，一个元素在任何给定时间只能拥有每种类型的一个伪元素。因此，当多个 :before 规则针对同一元素时，它们会级联形成单个 :before 伪元素。在提供的示例中，结果如下：

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

最近声明的内容声明优先，而其他声明被丢弃。此行为与常规 CSS 属性类似。

要将具有不同内容的多个伪元素应用于元素，请使用组合选择器创建其他 CSS 规则。例如，您可以使用 .circle.now:before 或 .now.circle:before 来定位元素并为每个伪元素指定所需的内容。

旧版 CSS 规范提出了一种用于插入多个 的语法： :before 和 ::after 伪元素，具有 CSS2.1 兼容级联。然而，此功能尚未实现，并且不太可能包含在未来的规范中。

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