嵌套的H3在CSS中不起作用

Question

I'm trying to change the margins of an h3 tag using scss in Angular. The scss is working but when I nest h3 inside a div tag it does not work.

Can someone point me in the right direction?

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

This is because your markup sets the id , and you CSS targets a class using the . syntax. Use #subTitle in CSS, or change the markup to use class=subTitle .

You should use a class because you're inside the *ngFor , and multiple elements should not have the same ID.