Question

我有以下HTML代码。从行开始，它在类contenedor中再重复2次，唯一改变的是i中的href url和de class（一个图标）。

<div class="contenedor">
<div class="row">
        <div class="col-lg-12">
            <center>
                <div class="zoom espacio">
                    <div class="contorno">
                        <a href="carta.html">
                            <i class="fas fa-shopping-bag fa-5x"></i>
                        </a>
                    </div>
                </div>
                <p>Prueba</p>
            </center>
        </div>
    </div>

<!–– Second time––>
<!–– Third time ––>
</div>

这个CSS。它的作用是当我将鼠标悬停在元素上时，我改变了contorno的背景图像。我想用nth-child属性单独更改3个元素的图像：

.contorno:hover{
background-color: none;
background-size: cover;
    background-image: url("someURL");
}

这就是我尝试过但却无法正常工作的事情：

.contenedor .row .col-lg-12 .zoom .espacio .contorno:hover:nth-child(1){
background-image: url("someURL");
}

感谢4帮助。

Answer 1

您需要选择nth-child的{{1}} .contenedor。

.row

＆＃13;

.contenedor .row:nth-child(1) .col-lg-12 .zoom.espacio .contorno:hover {
  background-image: url("someURL");
}

＆＃13;

.contenedor .row:nth-child(1) .col-lg-12 .zoom.espacio .contorno:hover {
  color: red;
}

.contenedor .row:nth-child(2) .col-lg-12 .zoom.espacio .contorno:hover {
  color: blue;
}

.contenedor .row:nth-child(3) .col-lg-12 .zoom.espacio .contorno:hover {
  color: green;
}

＆＃13;

您的选择器也不正确。 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="contenedor"> <div class="row"> <div class="col-lg-12"> <center> <div class="zoom espacio"> <div class="contorno"> <p> First </p> </div> </div> </center> </div> </div> <div class="row"> <div class="col-lg-12"> <center> <div class="zoom espacio"> <div class="contorno"> <p> Second </p> </div> </div> </center> </div> </div> <div class="row"> <div class="col-lg-12"> <center> <div class="zoom espacio"> <div class="contorno"> <p> Third </p> </div> </div> </center> </div> </div> </div>应为.zoom .espacio，因为.zoom.espacio未嵌套在.espacio内......它们是相同的元素。

我还建议删除.zoom代码，因为它已被弃用。

如何使用nth-child属性更改背景图像？

1 个答案: