我有一个有角度的项目,并创建了一个具有scss设置的组件,当我将选择器嵌套在ng-bootstrap选项卡类名称下时,似乎没有选择它。为什么.nav-link .badge我的scss中不能使用这样的选择器?但是,.card-body .badge确实会选择类似元素。
模板文件摘录
<ngb-tab id="projectInfoTab">
<ng-template ngbTabTitle>
Project info<span class="badge badge-pill badge-danger">4</span>
</ng-template>
<ng-template ngbTabContent>
...
Run Code Online (Sandbox Code Playgroud)
脚本
.nav-link .badge {
margin-left: .5em;
}
Run Code Online (Sandbox Code Playgroud)
这是渲染的HTML
<div _ngcontent-c3 class="card-body">
<a class="nav-link active" href="" role="tab" id="projectInfoTab" aria-controls="projectInfoTab-panel" aria-expanded="true" aria-disabled="false">
Project info<span _ngcontent-c3="" class="error-badge badge badge-pill badge-danger">4</span>
</a>
</div>
Run Code Online (Sandbox Code Playgroud)