Question

其余的CSS样式均可，但某些部分未应用。我该如何解决？

这是我的HTML代码，并显示了三个并排显示的图像。每个图像都有一个我想在每个图像下写的标题，但是这些部分的CSS样式未应用。

<div class="row">
    <div class="col-sm-4">
        <div class="placeBox">
            <div class="imgBx">
                <img src="images/paris.jpg" class="img-fluid">
            </div>
        </div>
        <div class="content">
            <h3>Turnul Eiffel<br>
                <span>Paris</span></h3>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="placeBox">
            <div class="imgBx">
                <img src="images/japan.jpg" class="img-fluid">
            </div>
        </div>
        <div class="content">
            <h3>Castelul Himeji<br>
                <span>Japonia</span></h3>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="placeBox">
            <div class="imgBx">
                <img src="images/grecia.jpg" class="img-fluid">
            </div>
        </div>
        <div class="content">
            <h3>Santorini<br>
                <span>Grecia</span></h3>
        </div>
    </div>
</div>

这些是未应用的CSS样式部分：

.placeBox .content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: baseline;
    align-items: flex-end;
}

.placeBox .content h3{
    position: relative;
    margin: 0;
    padding: 10px;
    background: rgba(0,0,0,.95);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    width: 100%;
    text-align: center;  
}

谢谢！

Answer 1

未应用这些规则，因为它们使用空格的“通用后代选择器”。当您在两个选择器之间放置一个空格时，如下所示：

.placeBox .content

您要告诉它查找具有类content的祖先的类placeBox的元素。这样的元素在您的标记中不存在，因为带有这些类的元素是兄弟姐妹，因此规则不适用。

要解决此问题，也许您想使用同级选择器+：

.placeBox + .content{
  ...
}

.placeBox + .content h3{
  ...
}

我的CSS样式的某些部分未应用。我该如何解决该问题？

1 个答案: