为什么角度自动添加不必要的标签？

Question

我想使用以下CSS编辑分页CSS：

<style>
.ngx-pagination a{
    margin: 0 3px ! important;
    color: #9B9B9B ! important;
    font-weight: bold ! important;
    border: solid 1px #ccc ! important;
    border-radius: 4px ! important;
    text-decoration: none ! important;
}
</style>

但是我不知道为什么在运行我的角度项目并检查浏览器后，为什么在我的CSS [_ngcontent-c3]上得到这个选择器

为什么要单独添加不必要的选择器？我不知道该如何删除

Answer 1

在使用_ngcontent-c#时会添加

ViewEncapsulation.Emulated属性-这是默认设置。

Angular使用这些属性以样式指定特定元素。数字c是主机组件的唯一标识符。例如，如果您有两个具有以下模板的组件：

ComponentA
<span></span>
<comp-b></comp-b>

ComponenB
<h1></h1>

Angular会将组件A中具有样式的所有元素标记为_ngcontent-c0，并将组件B内部具有样式的所有元素标记为_ngcontent-c1：

<comp-a>
    <span _ngcontent-c0></span>
    <comp-b _ngcontent-c0>
        <h1 _ngcontent-c1></h1>
    </comp-b>
</comp-a>

Answer 2

这是由于模拟视图封装而发生的。在这里angular.io/guide/component-styles#view-encapsulation

查看更多

要删除此内容，请使用：

encapsulation: ViewEncapsulation.None

组件装饰器功能中的

。但是，这将删除CSS组件的封装。换句话说，您的CSS不会独立，并且可能会受到其他样式的影响。