html - 你可以使用 2 :before pseudo classes in the same div?

Question

假设我有:

<div class="container">
<p>blah blah blah</p>
</div>

我可以在同一容器 div 中使用 2 :before 伪类吗？

像这样:

  .container:before{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 31%;
    height: 61%;
    background-color: black;
  }

.container:before{
    content: " A String ";
    position: absolute;
    top: 0;
    left: 0;
    background-color: black;
  }

忽略实际的 css 但这里的问题是在容器 div 之前插入 2 个伪类是否有效？如果没有，有什么办法可以做到吗？

Answer 1

不，您不能在单个元素中使用两个 :before 实例。这是一个不起作用的 jsfiddle，它在单个 div 上使用两个 :before 实例。如您所见，第二个 :before 语句覆盖了第一个的样式。

http://jsfiddle.net/Luwhf700/

现在，在这里，我们有一个可用的，使用 :before 和 :after，这类似于使用两个 :before语句(仅适用于绝对定位元素)。

http://jsfiddle.net/Luwhf700/1/