你能在同一个 div 中使用 2 :before pseudo 类吗？

Question

假设我有：

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

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

像这样：

  .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/

Answer 2

不可以，因为css被覆盖了，可以see the same here Also

如果没有，有什么办法吗？

您可以使用 java 脚本/ jquery 根据您的条件将 class 或 id 添加到 div 并设置css。

例如：

#before1.container{
    content: " ";
    position: absolute;
    top: 0;
    left: 0;

    background-color: red;
  }

#before.container{
    content: " A String ";
    position: absolute;
    top: 100px;
    left: 0;
    background-color: green;
  }

然后你只需要像下面这样设置id，使用jquery/javascript

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


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

要知道如何动态设置div id，check this link它有java脚本和jquery解决方案

你能在同一个 div 中使用 2 :before pseudo 类吗？

Can you use 2 :before pseudo classes in the same div?

html

css

pseudo-element

你能在同一个 div 中使用 2 :before pseudo 类 吗？

Can you use 2 :before pseudo classes in the same div?

html

css

pseudo-element

你能在同一个 div 中使用 2 :before pseudo 类吗？