我可以有多个：在相同元素的伪元素之前？

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描述：

与下述不同伪元素的表现就像在CSS现实元素和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。坏消息是，在任一规范中都没有找到多个伪元素特征，这可能是由于缺乏实施者的兴趣所致。

Answer 2

如果你的主要元素有一些子元素或文本，你可以使用它。

定位你的主要元素相对（或绝对/固定），并使用两个：之前和：之后定位绝对（在我的情况它必须是绝对的，不知道你的）。

现在，如果您想要一个伪元素，请将一个绝对：before附加到其中一个主元素的子元素（如果您只有文本，将其放在一个跨度中，现在您有一个元素），这不是相对的/绝对/固定。

此元素将开始行为，就像他的主人是您的主要元素。

HTML

<div class="circle"> 
    <span>Some text</span> 
</div> 

CSS

.circle { 
    position: relative; /* or absolute/fixed */ 
} 

.circle:before { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
} 

.circle:after { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
} 

.circle span { 
    /* not relative/absolute/fixed */ 
} 

.circle span:before { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
}