Некоторые части моего стиля CSS не применяются. Как я могу решить проблему?

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{
  ...
}