您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

在CSS2.1中,一个元素在任何时候最多只能具有任何一种伪元素。(这意味着一个元素可以同时具有a :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是您需要定义自己的属性的值。

其他 2022/1/1 18:24:12 有505人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶