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。