nth-child和助推器不工作

Question

我有3列，我希望每個人有一個不同的形象在他們。

<div class="container-fluid"> 
     <div class="col-sm-4"><div class="image"></div></div> 

     <div class="col-sm-4"><div class="image"></div></div> 

     <div class="col-sm-4"><div class="image"></div></div> 
</div> 

} 

.image{ 
background-color: black; 
background-size: 100% 100%; 
height: 400px; 
width: 557px; 
border: 5pt solid white; 
} 

我不認爲第n個孩子的CSS設置了正確的，但找不到多少幫我在網上。

div.col-sm-4:nth-child(1).image { 
background-image: url(../images/chestnutRice.jpg); 
} 
div.col-sm-4:nth-child(2).image { 
background-image: url(../images/diaryOfMine.jpg); 
} 
div..col-sm-4:nth-child(3).image { 
background-image: url(../images/travelTheWorld.jpg); 
} 

在每分鐘只是黑色。我究竟做錯了什麼？由於

Answer 1

錯字這裏：

div..col-sm-4 

應該

div.col-sm-4 

Answer 2

你可以嘗試像第三格在此之後

.container-fluid div:nth-child(1) .image{} 
.container-fluid div:nth-child(2) .image{} 
.container-fluid div:nth-child(3) .image{} 

Answer 3

錯別字的東西。

div..col-sm-4 

而且必須有第n個孩子之間的（1）

div.col-sm-4:nth-child(1) .image{ 
background-image: url(../images/chestnutRice.jpg); 
}