我正在构建一个Angular 2应用程序，并想知道如何最好地以亲子方式进行样式设计 . 类似于Angular 2的“英雄之旅”教程，我有一个顶级的styles.css文件 . 我的每个组件都有一个关联的styleUrl，指向特定于组件的css文件 .

我想我可以在styles.css文件中指定全局选项，并根据需要通过component.css文件覆盖它们 . 然后我发现Angular 2组件是'view encapsulated'，这意味着styles.css的属性不能被组件覆盖一点都不您显然可以将某些组件的“视图封装”设置为“无”，但该组件的css属性会污染其他组件 . 那不是我想要的 .

如果不能覆盖styles.css文件，究竟使用了什么？有没有办法在全局设置css选项并在某些组件中覆盖它们？

Example ：Angular 2 'Tour of Heroes'的Plunker示例：

https://angular.io/resources/live-examples/toh-6/ts/plnkr.htmlIn

在styles.css里面找到'主样式'，包括h2属性

h2, h3 {
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: lighter;
}

组件'heroes.component.html'包含h2 Headers 'My Heroes' . 假设我想用与我应用中的其他h2不同的颜色来设置这个特定的h2 Headers . 我可以进入'heroes.component.css'并指定：

h2 {
      color: #999;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: lighter;
    }

但是，由于“视图封装”，因此不会以这种方式覆盖颜色属性 . 有没有办法在不改变任何其他h2 Headers 的颜色的情况下仍然在本地覆盖主样式？

css angular