当前位置: 首页 > 面试题库 >

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

仲和韵
2023-03-14
问题内容

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

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

我正在尝试使用jQuery将上述样式应用于相同的元素,但仅应用了最新样式,从未应用过这两种样式。


问题答案:

在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是您需要定义自己的属性的值。



 类似资料:
  • 问题内容: 我对了解何时可以将和伪元素应用于自动关闭标签特别感兴趣。根据W3生成的内容CSS规范,这是这些伪元素的定义: 12.1:before和:after伪元素 :作者使用 :before和:after伪元素 指定生成内容的样式和位置。顾名思义,:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。“ content”属性与这些伪元素一起指定了要插入的内容。 基于此,这些

  • 问题内容: 我正在尝试为HTML5中的提出一些好的默认样式,并尝试了以下方法: las,内容从不显示。对于伪元素,双冒号和单冒号都不是问题。我都尝试过。拥有一个伪元素和一个伪类也不是问题。我已经尝试过不使用和了。在Chrome,Safari和Firefox中,我得到了相同的行为(Firefox没有和类,但是我尝试了不使用它们。) 在伪元素工作细,,,和元素-其中一些是块元件和一些是内联。 因此,我

  • 假设我有这样的html: 我只想获得之前的 。有没有办法用JSOUP做到这一点呢?我知道我可以把所有的宠物都弄成这样: 但这也包括额外的宠物。我想知道我是只能选择上面的宠物还是只是删除下面的宠物然后使用那个代码?

  • 问题内容: 我了解ID在HTML / XHTML页面内必须唯一。 我的问题是,对于给定的元素,我可以为其分配多个ID吗? 我意识到我只需使用一个类就可以轻松解决问题。我只是好奇以这种方式使用id。 问题答案: 否。根据XHTML 1.0规范 在XML中,片段标识符的类型为ID,每个元素只能有一个类型为ID的属性。因此,在XHTML 1.0中,将id属性定义为ID类型。为了确保XHTML 1.0文档

  • 问题内容: 有什么原因导致此CSS无法正常工作? ..在这个HTML上? 这个想法是在匹配的锚标签上有一个伪元素。但是我不希望它适用于包装图像的锚标签。而且由于我无法使用诸如来定位锚,所以我想也许可以通过找到一个与之类似的图像来定位:after伪元素。 任何见识将不胜感激。 问题答案: 您无法定位:之后,因为它的内容未在DOM中呈现且无法对其进行操作-为此,必须重新呈现DOM,而CSS不能像这样进

  • 问题内容: 这是我最近的问题的补充:是否可以使用伪元素来使包含元素包裹在绝对定位的元素周围(如clearfix)? 我正在尝试使用伪元素来“清除”绝对定位的图像。我已经尽力使相同的图像显示在幻灯片后面,但似乎无法对插入的图像应用宽度。我疯了吗,还是不能将宽度应用于内容为url(img/image.jpg)的伪元素?我尝试了display:block等的各种变化,但无济于事… 我需要将伪元素图像的宽