我遇到了嵌套在ng-bootstrap选项卡中的scss选择器的问题

我有一个有角度的项目，并创建了一个具有scss设置的组件，当我将选择器嵌套在ng-bootstrap选项卡类名称下时，似乎没有选择它。为什么.nav-link .badge我的scss中不能使用这样的选择器？但是，.card-body .badge确实会选择类似元素。

模板文件摘录

 
    
       Project info4
    
 
...

脚本

.nav-link .badge {
  margin-left: .5em;
}

这是渲染的HTML

  
    Project info4
  

Bunyamin Cos.. 6

这是由于Angular封装机制。创建组件时，Emulated默认情况下是封装。

检查此链接：通过Angular检查生成的CSS

当您将样式放入组件样式文件中时，angular将生成您的样式并添加一些属性，因此您的自定义样式

.nav-link .badge {
   margin-left: .5em;
}

编译后将变成类似以下内容

.nav-link[_ngcontent-c3] .badge {
   margin-left: .5em;
}

并且由于您的ngb-tab组件可能没有具有该属性的任何元素，因此它不适用于该元素。您可以通过在@Component装饰中添加以下代码来更改组件封装。

@Component({
   selector: 'your-comp',
   ....
   encapsulation: ViewEncapsulation.None
})

您可以做的另一件事是将此CSS移至ngb-tab组件样式文件。

这是由于Angular封装机制。创建组件时，Emulated默认情况下是封装。

检查此链接：通过Angular检查生成的CSS

当您将样式放入组件样式文件中时，angular将生成您的样式并添加一些属性，因此您的自定义样式

.nav-link .badge {
   margin-left: .5em;
}

编译后将变成类似以下内容

.nav-link[_ngcontent-c3] .badge {
   margin-left: .5em;
}

并且由于您的ngb-tab组件可能没有具有该属性的任何元素，因此它不适用于该元素。您可以通过在@Component装饰中添加以下代码来更改组件封装。

@Component({
   selector: 'your-comp',
   ....
   encapsulation: ViewEncapsulation.None
})

您可以做的另一件事是将此CSS移至ngb-tab组件样式文件。