css - :nth-child(n):before is doesn't working?

Question

我有问题::nth-child(n):before 工作吗？

所以，我使用 SASS。
为什么以下代码不起作用？

@for $i from 1 through 4
  .block:nth-child(#{$i}):before
      background: url(../../img/block-img-#{$i}.jpg)
      background-size: cover

编译为:

.content .cnt1 .block:nth-child(1):before {
  background: url(../../img/block-img-1.jpg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(2):before {
  background: url(../../img/block-img-2.jpg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(3):before {
  background: url(../../img/block-img-3.jpg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(4):before {
  background: url(../../img/block-img-4.jpg);
  background-size: cover;
}

图像的所有目录都是真实的。但它不起作用:(我做错了什么？

Answer 1

::before 伪元素本身是不可见的。您还需要为其提供 display 属性和一些内容。否则，它不会显示。

现在您还没有提供 HTML，但如果我可以假定它只是一堆嵌套的 div，那么所需的额外 CSS 如下所示。

.content .cnt1 .block::before {
  display:block; content:'';
  height:200px;                /* a height, any height */
}

或者更完整的示例:(不要介意背景图片)

.content .cnt1 .block::before {
  display:block; content:'';
  height:200px;                /* a height, any height */
}
.content .cnt1 .block:nth-child(1)::before {
  background: url(http://images.clipartpanda.com/number-clipart-niXxEn7iB.jpeg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(2)::before {
  background: url(http://images.clipartpanda.com/clipart-numbers-9czE7pRpi.png);
  background-size: cover;
}

.content .cnt1 .block:nth-child(3)::before {
  background: url(http://images.clipartpanda.com/creation-clip-art-RTAE8d8TL.jpeg);
  background-size: cover;
}

.content .cnt1 .block:nth-child(4)::before {
  background: url(http://images.clipartpanda.com/number-clip-art-RcA6Axgji.png);
  background-size: cover;
}

<div class="content">
<div class="cnt1">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>

顺便说一句，:before 中带一个冒号的表示法已被弃用；首选方式是 ::before。

或者，如果您想使用 :before 来与旧版浏览器兼容，请注意您也不能使用 background-size。
也就是说，使用 :before 的唯一原因是你想与 IE8 兼容。 :before 在 IE 中有效，::before 无效。
但是由于 IE8 不支持 background-size 或 nth-child()，您无论如何都无法让这个特定示例在 IE8 中工作，因此没有必要麻烦。