使用嵌套组件时，为什么css没有应用于p标签？

Question

能否请您告诉我为什么css没有应用于p标签？我有嵌套的组件。现在我想在内部组件元素中添加css，但是无法应用color属性，为什么？ 这是我的代码

.a p {
  color: blue;
}

.a .test{
  color: blue;
}

https://stackblitz.com/edit/angular-f99kxh?file=src%2Fapp%2Fhello.css

Answer 1

发生这种情况的原因是角度css encapsulation将css绑定到它所连接的组件的作用域，而不是允许其默认的级联行为。

您可以只创建一个不特定于组件的全局css文件，然后将其导入到index.html中，也可以一般将其导入disable。

Answer 2

您可以使用 :: ng-deep 来获取内部元素。

configuration.get[Int]("play.server.http.port")

updated stackblitz

Answer 3

组件CSS将应用于HTML视图。因此，您应该在组件css文件中写入css。

abc.ts

 @Component({
  selector: 'abc',
  template: `<p class="test">abc</p>`,
  styleUrls: ['./abc.css']
})

在abc.css中添加您的CSS。

希望它能对您有所帮助！