应用程序中css定义文件之间css类的层次结构和继承性

我很好奇CSS文件是如何通过角度应用程序传播的。我有最高级别的src文件夹，其中包括styles.css。我知道这里定义的样式适用于整个应用程序。下面是app文件夹，其中包含app.component.css。它有两个子组件，alpha.component和beta.component，分别位于各自的文件夹中（alpha和beta）。alpha有gamma和delta子文件夹，每个子文件夹都有自己的组件，这些组件由css、html和ts文件定义。如果我在alpha.component.css中定义一个类，并在gamma.component.html中使用该类，那么alpha.component.css中的规则是否会应用于我的类的这些实例？同样，如果在app.component.css中定义了一个类，它会应用于应用程序中的所有html文件吗？

我们在css中定义的任何样式都只会应用于它们所属的组件。这在Angular中称为

视图封装

当您检查元素时，您可以看到一些奇怪的标记，如

。my nav[\u ngcontent-c0]

是由angular添加的，这对于每个组件类都是唯一的。这就是我们知道应用哪种风格的方法。您可以通过以下方式替代此功能：

@Component({
  selector: 'app-xxx',
  templateUrl: './xxx.component.html',
  styleUrls: ['./xxx.component.css'],
  encapsulation: ViewEncapsulation.None
 })

视图封装。无需从core导入

而

src

文件夹中的全局

styles.css

文件将应用于整个项目。此行为与应用程序的文件夹结构无关。全局样式添加到

样式下的
文件.angular cli.json
中

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/material-design-icons/iconfont/material-icons.css",
    "styles.css"
  ]

如您所见，我最后添加了全局css，优先级更高。
谢谢！这真的很有帮助。如果这个问题有问题，请留下评论。