Question

让我说我有：

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

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

像这样：

  .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，它在单个before上使用两个：div个实例。如您所见，第二个:before语句会覆盖第一个样式。

http://jsfiddle.net/Luwhf700/

现在，我们在这里使用了:before和:after，这与使用两个:before语句类似（仅适用于绝对定位元素）。

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

Answer 2

无法完成，因为css被覆盖，您可以see the same here Amar Syla answered the same

如果没有办法可以吗？

您可以使用java script / jquery根据条件和设置css向div添加class或id。

例如：

#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;
  }

然后你只需要使用jquery / javascript

设置如下id

<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：伪类吗？

2 个答案: