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

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

在（1）

之后必须有一个空格

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

nth-child和boostrap无法正常工作

3 个答案: