Angular5中的伪元素

Pseudo elements in Angular5

为什么 Angular5 中 CSS 中的常规伪 类 不能正常工作？我知道您可以使用 Angular 事件处理程序（例如 (click)="function1()" 或 (mouseenter)="function2()"）模仿他们的行为。

我们不能在 Angular 中使用常规 CSS 伪 类 的原因是什么？

CSS 与 Angular 配合使用效果很好。

就是说，Angular 封装了您正在处理的当前组件的 CSS（您不必为此担心）。这是您通过 shadow DOM 获得的一项功能，但由于并非所有浏览器都支持该功能，Angular 通过在您的组件上添加属性来模拟它：

<div _ngcontent-c6>... your content ...</div>

然后你写的原来的CSS被angular改成了：

div[_ngcontent-c0] {
  color: red; // for example
}

所以如果你想写一些 CSS 会影响其他组件而不仅仅是当前组件，你应该将视图封装设置为 none:

@Component({
  selector: '...',
  templateUrl: '',
  styleUrls: [''],
  encapsulation: ViewEncapsulation.none
})

或者，如果您有一个 angular cli 项目，您还可以在没有任何视图封装的 styles.scss（或 .css）文件中定义全局样式.

在此处查看更多信息：https://angular.io/guide/component-styles#view-encapsulation

（但在关闭该功能之前，请三思，因为它真的很有用）