.circle:before { content: "\25CF"; font-size: 19px; } .now:before{ content: "Now"; font-size: 19px; color: black; }
我试图使用jQuery应用上述样式到同一个元素,但只应用最近的一个,而不是两个。
解决方法
因此,当您有多个:在匹配相同元素的规则之前,它们都将级联并应用于单个:before伪元素,如同普通元素。在您的示例中,最终结果如下所示:
.circle.now:before { content: "Now"; font-size: 19px; color: black; }
正如你所看到的,只有具有最高优先级的内容声明(如上所述,最后一个)将会生效 – 其余的声明将被丢弃,就像任何其他CSS属性的情况一样。
这种行为在Selectors section of CSS2.1中描述:
Pseudo-elements behave just like real elements in CSS with the exceptions described below and 07001
这意味着具有伪元素的选择器像普通元素的选择器一样工作。这也意味着级联应该以相同的方式工作。奇怪的是,CSS2.1似乎是唯一的参考; css3-selectors和css3-cascade都没有提到这一点,仍有待观察它是否将在未来的规范中澄清。
如果一个元素可以使用同一个伪元素匹配多个选择器,并且希望所有的元素以某种方式应用,那么您将需要使用组合选择器创建其他CSS规则,以便您可以指定浏览器应该在那些病例。我不能提供一个完整的例子包括内容属性在这里,因为不清楚例如符号还是文本应该首先。但是这个组合规则需要的选择器是.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的幌子积极地进行重写。坏消息是,多个伪元素特征在任一规范中都无处可见,可能还由于缺乏实现者利益。