Question

同一个元素可能有多个:before个伪吗？

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

我正在尝试使用jQuery将上述样式应用于同一元素，但只应用最新的样式，而不是两者都适用。

Answer 1

在CSS2.1中，元素在任何时候最多只能有一种伪元素。（这意味着一个元素可以同时具有:before和:after伪元素 - 它不能包含多种类型的元素。）

因此，当您有多个:before规则匹配相同的元素时，它们将全部级联并应用于单个:before伪元素，与普通元素一样。在您的示例中，最终结果如下所示：

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

正如您所看到的，只有具有最高优先级的content声明（如上所述，最后一个声明）才会生效 - 其他声明将被丢弃，就像其他任何CSS一样属性。

Selectors section of CSS2.1：

中描述了此行为

伪元素的行为与CSS中的真实元素一样，下面描述的例外情况和elsewhere.

这意味着具有伪元素的选择器就像普通元素的选择器一样。这也意味着级联应该以相同的方式工作。奇怪的是，CSS2.1似乎是唯一的参考; css3-selectors和css3-cascade都没有提到这一点，未来的规范是否会澄清它还有待观察。

如果一个元素可以匹配多个具有相同伪元素的选择器，并且您希望以某种方式应用所有这些选择器，则需要使用组合选择器创建其他CSS规则，以便您可以准确指定浏览器应该在那些情况下。我无法在此提供包含content属性的完整示例，因为它不清楚例如符号或文本是否应该首先出现。但是，此合并规则所需的选择器可以是.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为幌子进行重写。坏消息是，在任何规范中都无法找到多个伪元素特征，这可能是由于缺乏实施者的兴趣。

Answer 2

如果你的主要元素有一些子元素或文本，你可以使用它。

将你的主元素定位为相对（或绝对/固定）并同时使用：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 */
}

Answer 3

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

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

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

Answer 4

您还可以在内容字段中使用图像/图标和文本

例如

p.album-title::after {
  content: url('https://...camera-icon-blue.png') ' View >';
  display: block;
  ...;
}

我可以有多个：在同一元素的伪元素之前？

4 个答案: