css - 我可以有多个 :before pseudo-elements for the same element?

Question

是否可以对同一个元素使用多个 :before 伪元素？

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

我正在尝试使用 jQuery 将上述样式应用于同一个元素，但只应用了最近的一个，而不是同时应用了两个。

Answer 1

在CSS2.1中，任何时候一个元素最多只能有任意一种伪元素。 (这意味着一个元素可以同时具有 :before 和 :after 伪元素 — 每种元素不能超过一个。)

因此，当您有多个 :before 规则匹配同一元素时，它们将全部级联并应用于单个 :before 伪元素，如一个正常的元素。在您的示例中，最终结果如下所示:

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

如您所见，只有具有最高优先级(如前所述，最后一个)的 content 声明才会生效——其余的声明将被丢弃，就像任何其他 CSS 属性。

此行为在 Selectors section of CSS2.1 中进行了描述:

Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere.

这意味着带有伪元素的选择器就像普通元素的选择器一样工作。这也意味着级联应该以相同的方式工作。奇怪的是，CSS2.1 似乎是唯一的引用；都不是css3-selectors也不css3-cascade完全提及这一点，是否会在未来的规范中加以澄清还有待观察。

如果一个元素可以匹配多个具有相同伪元素的选择器，并且您希望所有这些选择器都以某种方式应用，您将需要使用组合选择器创建额外的 CSS 规则，以便您可以准确指定浏览器应该做什么在那些情况下做。我无法在此处提供包含 content 属性的完整示例，因为例如不清楚符号还是文本应该放在第一位。但是，此组合规则所需的选择器是 .circle.now:before 或 .now.circle:before — 您选择哪个选择器是个人偏好，因为两个选择器都是等价的，它只是您需要自己定义的 content 属性的值。

如果您还需要具体示例，请参阅我对 this similar question 的回答.

The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements使用与 CSS2.1 级联兼容的符号，但请注意该特定文档已过时 - 自 2003 年以来未更新，并且在过去十年中没有人实现该功能。好消息是被遗弃的文档正在以 css-content-3 的名义积极进行重写。和 css-pseudo-4 .坏消息是，在这两个规范中都找不到多个伪元素功能，这大概是由于实现者缺乏兴趣。