同一个元素可以有多个 :before 伪元素吗? [英] Can I have multiple :before pseudo-elements for the same element?

问题描述

同一元素是否可以有多个 :before 伪?

Is it possible to have multiple :before pseudos for the same element?

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

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

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 和一个 :after 伪元素——它只是不能有超过一个.)

In CSS2.1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)

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

As a result, when you have multiple :before rules matching the same element, they will all cascade and apply to a single :before pseudo-element, as with a normal element. In your example, the end result looks like this:

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

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

As you can see, only the content declaration that has highest precedence (as mentioned, the one that comes last) will take effect — the rest of the declarations are discarded, as is the case with any other CSS property.

CSS2.1 的 Selectors 部分描述了这种行为:

除了下面描述的例外情况和 其他地方.

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

这意味着带有伪元素的选择器就像普通元素的选择器一样工作.这也意味着级联应该以相同的方式工作.奇怪的是，CSS2.1 似乎是唯一的参考.css3-selectors 和 css3-cascade完全没有提到这个，未来的规范中是否会明确还有待观察.

This implies that selectors with pseudo-elements work just like selectors for normal elements. It also means the cascade should work the same way. Strangely, CSS2.1 appears to be the only reference; neither css3-selectors nor css3-cascade mention this at all, and it remains to be seen whether it will be clarified in a future specification.

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

If an element can match more than one selector with the same pseudo-element, and you want all of them to apply somehow, you will need to create additional CSS rules with combined selectors so that you can specify exactly what the browser should do in those cases. I can't provide a complete example including the content property here, since it's not clear for instance whether the symbol or the text should come first. But the selector you need for this combined rule is either .circle.now:before or .now.circle:before — whichever selector you choose is personal preference as both selectors are equivalent, it's only the value of the content property that you will need to define yourself.

如果您仍需要具体示例，请参阅我对 这个类似的问题.

If you still need a concrete example, see my answer to this similar question.

旧版 css3-content 规范包含有关插入的部分多个 ::before 和 ::after 伪元素 使用与 CSS2.1 级联兼容的符号，但请注意该特定文档已过时 —它自 2003 年以来就没有更新过，过去十年没有人实现过该功能.好消息是，被遗弃的文档正在以 css-content-3 和 css-pseudo-4.坏消息是，在这两个规范中都找不到多个伪元素功能，这大概是由于缺乏实现者的兴趣.

The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements using a notation that's compatible with the CSS2.1 cascade, but note that that particular document is obsolete — it hasn't been updated since 2003, and no one has implemented that feature in the past decade. The good news is that the abandoned document is actively undergoing a rewrite in the guise of css-content-3 and css-pseudo-4. The bad news is that the multiple pseudo-elements feature is nowhere to be found in either specification, presumably owing, again, to lack of implementer interest.

这篇关于同一个元素可以有多个 :before 伪元素吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！