:nth-child(n):before 不起作用吗? [英] :nth-child(n):before is doesn't working?

问题描述

我有一个问题::nth-child(n):before 工作吗?

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

@for $i 从 1 到 4.block:nth-child(#{$i}):before背景: url(../../img/block-img-#{$i}.jpg)背景尺寸:封面

它正在编译为:

.content .cnt1 .block:nth-child(1):before {背景: url(../../img/block-img-1.jpg);背景尺寸:封面；}.content .cnt1 .block:nth-child(2):before {背景: url(../../img/block-img-2.jpg);背景尺寸:封面；}.content .cnt1 .block:nth-child(3):before {背景: url(../../img/block-img-3.jpg);背景尺寸:封面；}.content .cnt1 .block:nth-child(4):before {背景: url(../../img/block-img-4.jpg);背景尺寸:封面；}

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

解决方案

就其本身而言，::before 伪元素是不可见的.你还需要给它一个 display 属性和一些内容.否则，它不会显示.

现在你还没有提供 HTML，但如果我可以假设它只是一堆嵌套的 div，那么所需的额外 CSS 看起来像这样.

.content .cnt1 .block::before {显示:块；内容:'';高度:200px；/* 高度，任意高度 */}

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

.content .cnt1 .block::before {显示:块；内容:'';高度:200px；/* 高度，任意高度 */}.content .cnt1 .block:nth-child(1)::before {背景:网址(http://images.clipartpanda.com/number-clipart-niXxEn7iB.jpeg)；背景尺寸:封面；}.content .cnt1 .block:nth-child(2)::before {背景:网址(http://images.clipartpanda.com/clipart-numbers-9czE7pRpi.png)；背景尺寸:封面；}.content .cnt1 .block:nth-child(3)::before {背景:网址(http://images.clipartpanda.com/creation-clip-art-RTAE8d8TL.jpeg)；背景尺寸:封面；}.content .cnt1 .block:nth-child(4)::before {背景:网址(http://images.clipartpanda.com/number-clip-art-RcA6Axgji.png)；背景尺寸:封面；}

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

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

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

I have question: does :nth-child(n):before working?

So, I using SASS.
Why following code is not working?

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

It's compiling to:

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

All dirs to images is true. But it's not working :( What I'm doing wrong?

解决方案

By itself, a ::before pseudo element is not visible. You will also need to give it a display property, and some content. Otherwise, it won't show.

Now you haven't provided the HTML, but if I can presume that it's just a bunch of nested divs, the required extra CSS looks like this.

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

Or for a more complete example: (never mind the background images)

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

By the way, the notation for :before with one colon is deprecated; the preferred way is ::before.

Or, if you want to use :before for compatibility with older browsers, then be warned that you can't use background-size either.
That is, the only reason to use :before is if you want to be compatible with IE8. :before works in IE, ::before doesn't.
But since IE8 doesn't support background-size or nth-child(), you won't get this particular example to work in IE8 anyway, so there's no need to bother.

这篇关于:nth-child(n):before 不起作用吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！