：nth-​​child（n）：之前是不工作？

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中工作，所以沒有必要打擾。