同一元素的伪元素之前可以有多个:before吗?


116

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

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

我正在尝试使用jQuery将上述样式应用于同一元素,但仅应用了最新样式,从未应用过它们。

Answers:


94

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

结果,当您有多个:before规则匹配同一元素时,它们将全部层叠并应用于单个:before伪元素,就像普通元素一样。在您的示例中,最终结果如下所示:

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

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

CSS2.1选择器部分中描述了此行为

伪元素的行为类似于CSS中的真实元素,但以下所述和 其他地方。

这意味着具有伪元素的选择器的工作方式与普通元素的选择器一样。这也意味着级联应该以相同的方式工作。奇怪的是,CSS2.1似乎是唯一的参考。既不是CSS3选择器也不是CSS3级联提到这一点在所有的,它仍然有待观察是否会在将来的规范予以澄清。

如果一个元素可以将多个选择器与相同的伪元素匹配,并且您希望所有元素都以某种方式应用,则需要使用组合的选择器创建其他CSS规则,以便您可以确切指定浏览器在这些选择器中应该执行的操作案件。我无法在content此处提供包含该属性的完整示例,因为例如不清楚是符号还是文本优先。但是您需要此组合规则的选择器是.circle.now:before.now.circle:before -选择的哪个选择器都是个人偏好,因为两个选择器都是等效的,仅content是您需要定义自己的属性的值。

如果您仍然需要一个具体示例,请参阅我对类似问题的回答

旧版css3-content规范包含有关::before::after使用与CSS2.1级联兼容的表示法插入多个元素伪元素的部分,但请注意,该特定文档已过时-自2003年以来未进行过更新,并且没人在过去的十年中实施了该功能。好消息是,废弃的文档正在以css-content-3css-pseudo-4的名义积极地进行重写。坏消息是,在任何一个规范中都找不到多重伪元素功能,这可能又是由于缺乏实现者的兴趣。


12
在给定的情况下,如果一个元素既属于class circle又属于class now,则两个规则都适用于该元素的:before伪元素,但是普通CSS表示只有其中一种content设置可以生效(通过普通级联规则)。关键是content不累积。
Jukka K. Korpela 2012年

事实证明这个问题,我在几个月后回答是这样的一个的副本。从那以后,我将来自其他答案的大部分信息进行了合并,该信息基本上扩展了@Jukka上面说的所有内容,并将其合并为这个信息,因为它获得的流量远远超过了第一位。
BoltClock

1
13年后,css-content-3草案终于更新了。肯定删除了伪元素部分,而使用了css-pseudo-4,它不允许多个::before也不是::after伪元素。
Oriol

@Oriol:实际上是12年。去年引入了css-pseudo-4的FPWD,当时css-content-3已被更新以指向新规范。
BoltClock

@BoltClock drafts.c​​sswg.org上的css-content-3编辑器草案是在不久前更新的,但直到最近,w3.org上的工作草案仍是2003年的。我仍然有一些希望...
Oriol

31

如果您的主要元素包含一些子元素或文本,则可以使用它。

将主要元素定位为相对(或绝对/固定),并同时使用:before和:after定位绝对(在我的情况下,它必须是绝对的,不知道您的元素)。

现在,如果您要再使用一个伪元素,请在主元素的子元素之一上附加一个绝对值:before(如果只有文本,则将其放在span中,现在您有一个元素),该值不是相对的/绝对的/固定的。

该元素将开始起作用,就像他的所有者是您的主要元素一样。

的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 */
}

2
尽管选择的答案是准确的,但对于我的情况而言,这是可行的解决方法。我能够模拟具有多个伪元素,而无需向DOM添加更多节点!
matt.kauffman17年

@ matt.kauffman23那么,能否请您告诉您如何模拟的?
BbIKTOP

1
@BbIKTOP对不起,您刚刚看到了您的评论。以我.modal:first-child:before { …
为例

@ matt.kauffman23要想收集6年以上的细节,您将拥有美好的回忆!
ChrisOdney

1

我已经使用以下方法解决了此问题:

.element:before {
    font-family: "Font Awesome 5 Free" , "CircularStd";
    content: "\f017" " Date";
}

对图标使用字体家族“ font awesome 5 free”,然后,我们必须再次指定要使用的字体,因为如果不这样做,导航器将使用默认字体(乘以新的罗马字体或类似符号)这个)。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.