css - nth-child 和 bootstrap 不工作

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

我认为 nth-child 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