scss中嵌套的h3不起作用

Question

我试图在Angular中使用scss来改变h3标签的边距。 scss正在工作，但是当我将h3嵌套在div标签中时，它不起作用。

有人能指出我正确的方向吗？

SCSS

// Does not work 
.subTitle { 
    h3 { 
     margin-top: 1px; 
    } 
} 

// Works 
h3 { 
    margin-top: 1px; 
} 

HTML

<div class="row"> 
    <div *ngFor="let post of allPosts" class="col-md-12 blogPost"> 
     <div id="title"><h1>{{post.title}}</h1></div> 
     <div id="subTitle"><h3>{{post.subTitle}}</h3></div> 
     <div id="blogContent"><p>{{post.content}}</p></div> 
    </div> 
</div> 

JS

Answer 1

这是因为你的标记设置id，你使用.语法CSS对象的类。在CSS中使用#subTitle，或将标记更改为使用class=subTitle。

你应该使用一个类，因为你在*ngFor之内，并且多个元素不应该有相同的ID。