我可以有多个：伪元素之前的同一元素？ [英] Can I have multiple :before pseudo-elements for the same element?
问题描述
对于同一个元素，可以有多个：之前
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 和：伪元素之后 -
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;
}
正如你所看到的，只有 code>声明具有最高优先级（如上所述，最后一个）将生效 - 其余的声明被丢弃，如同任何其他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.
This behavior is described in the Selectors section of CSS2.1:
伪元素的行为与CSS中的实际元素一样， =http://www.w3.org/TR/CSS21/generate.html#before-after-content =noreferrer> 。
这意味着伪元素的选择器与普通元素的选择器一样工作。这也意味着级联应该以相同的方式工作。奇怪的是，CSS2.1似乎是唯一的参考;既不 css3选择器也不 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.
这篇关于我可以有多个：伪元素之前的同一元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
