html - 样式嵌套标签不起作用

Question

我在 html 中有以下代码:

<div class="carousel-content">
    <div>
        <h2 class="hidden-sm contents">test<br> 
            test2
        </h2>
        <h3 class="visible-sm contents">test
        </h3>    
    </div>
</div>

我将 h2 和 h3 的样式设置如下:

.carousel-content>div> h2,h3,h4{

    color: #ffffff;
    line-height: 145%;
    font-family: 'Lato', sans-serif;

}

但样式不适用。难道我做错了什么？谢谢

Answer 1

您需要为每个 h2、h3、h4 选择器添加完整路径:

.carousel-content > div > h2,
.carousel-content > div > h3,
.carousel-content > div > h4 {

    color: red;
    line-height: 145%;
    font-family: 'Lato', sans-serif;

}

<div class="carousel-content">
    <div>
        <h2 class="hidden-sm contents">test<br> 
            test2
        </h2>
        <h3 class="visible-sm contents">test
        </h3>    
    </div>
</div>