样式嵌套标签不起作用

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>