Chr*_*ney 103 css css-selectors css3 pseudo-element css-content
是否有可能:before为同一元素有多个伪？
.circle:before {
content: "\25CF";
font-size: 19px;
}
.now:before{
content: "Now";
font-size: 19px;
color: black;
}
我试图使用jQuery将上述样式应用于同一元素,但只应用最新的样式,而不是两者都应用.
Bol*_*ock 89
在CSS2.1中,元素在任何时候最多只能包含任何类型的伪元素.(这意味着一个元素可以同时具有一个:before和一个:after伪元素 - 它不能有多种类型.)
因此,当您有多个:before匹配同一元素的规则时,它们将全部级联并应用于单个:before伪元素,与普通元素一样.在您的示例中,最终结果如下所示:
.circle.now:before {
content: "Now";
font-size: 19px;
color: black;
}
正如您所看到的,只有content具有最高优先级的声明(如上所述,最后一个)将生效 - 其余的声明将被丢弃,与任何其他CSS属性的情况一样.
这意味着具有伪元素的选择器就像普通元素的选择器一样工作.这也意味着级联应该以相同的方式工作.奇怪的是,CSS2.1似乎是唯一的参考; 既不CSS3选择器也不CSS3级联提到这一点在所有的,它仍然有待观察是否会在将来的规范予以澄清.
如果一个元素可以匹配多个具有相同伪元素的选择器,并且您希望以某种方式应用所有这些选择器,则需要使用组合选择器创建其他CSS规则,以便您可以准确指定浏览器应该执行的操作案例.我不能在content这里提供一个完整的例子,包括属性,因为它不清楚例如符号或文本是否应该首先出现.但是这个组合规则所需的选择器要么是- .circle.now:before或者.now.circle:before你选择的选择器是个人偏好,因为两个选择器是等价的,它只是content你需要自己定义的属性的值.
如果您仍需要一个具体的例子,请参阅我对这个类似问题的回答.
遗留的css3-content规范包含一个关于::before::after使用与CSS2.1级联兼容的符号插入多个和伪元素的部分,但请注意该特定文档已过时 - 自2003年以来尚未更新,并且没有人拥有在过去十年中实施了这一功能.好消息是,废弃文档正在以css-content-3和css-pseudo-4为幌子进行重写.坏消息是,在任一规范中都找不到多个伪元素特征,这可能是由于缺乏实施者的兴趣.
Hyd*_*Orc 26
如果您的主元素有一些子元素或文本,您可以使用它.
将主要元素定位为相对(或绝对/固定)并使用:before和:after absolute absolute(在我的情况下,它必须是绝对的,不知道你的).
现在,如果你想要一个伪元素,请将一个绝对: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 */
}
小智 7
我已经使用以下方法解决了这个问题：
.element:before {
font-family: "Font Awesome 5 Free" , "CircularStd";
content: "\f017" " Date";
}
使用字体系列“font Awesome 5 free”作为图标，之后，我们必须再次指定我们使用的字体，因为如果我们不这样做，导航器将使用默认字体（times new roman 或类似的字体）这）。