将CSS放在应用程序的不同部分会产生不同的效果

我有一个非常奇怪的情况，我的观点是不同的，这取决于我把下面的CSS类放在哪里。我只有一个项目是连接到这个类，这是我的md进度条从角材料2。我希望它浮动在我的工具栏下面，工具栏固定在屏幕上

.floating-progress {
  position: fixed;
  top: 0px;
  z-index: 1005;
}

当我把这个放到app.component.css中时，我得到了以下结果，其中工具栏位于工具栏的顶部

然而，当我将这个css类更改为我的global styles.css时，我得到了我想要的实际结果

---

为什么会有不同的版本取决于我把它放在哪里？

Angular为添加的组件进行样式封装

组件获得类似于

\ng_context-xxx

的属性，并添加了唯一的

xxx

。 在将CSS添加到DOM之前，将重写CSS选择器以仅匹配这些属性

---

另见

嗯。我知道这一点。然而，这将如何改变这种看法？这是否意味着每次我想做一些简单的事情，比如#someId{top:20px；}，我都需要注意我是在最低级别还是在父级声明它？在软件开发中，你通常应该总是关心把东西放在哪里；-）实际上，这是关于限制添加到组件的样式，使其仅影响该组件，而不影响其他组件，这通常被认为是一件好事。如果你想影响你的整个页面，只需在页面外添加样式。如果希望样式跨越组件边界，可以使用

/deep/

。另见Hi@Gunter。谢谢我同意这一点。然而，我无法理解为什么这个特殊的例子会有不同。风格真的不应该不受你放在哪里的影响吗。例如，如果我想将id=“test”的某个项目设置为蓝色，那么将其放在最低级别或全局样式表（尽管最佳实践是最低级别）应该无关紧要。我只是想不通为什么，在这种情况下，我会得到不同的结果，我不知道该怎么解释。起初你同意，但后来你不同意。如果向构件添加样式，则该样式仅影响该构件。这就是样式封装的意义所在。您可以为每个组件设置

ViewEncapsulation.None

，以禁用样式封装。