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 */
}

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

＆＃13;

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

＆＃13;

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

＆＃13;

顺便说一句，不推荐使用带有一个冒号的:before符号;首选方式是::before。

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

：n-child（n）：之前没有工作？

1 个答案: