將CSS放在應用程序的不同部分會產生不同的效果

我有一個非常奇怪的情況，我的視圖根據放置以下CSS類的位置而不同。我只有一個連接到這個類的項目，這是來自Angular Materials 2的我的md-progress-bar。我希望它浮動在我固定在屏幕上的工具欄下方。將CSS放在應用程序的不同部分會產生不同的效果

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

當我把它放在app.component.css中時，我會得到下面的結果，其中工具欄位於工具欄的頂部。

然而，當我改變這個CSS類到我的全球styles.css中，我得到一個實際的結果，我想

爲什麼有不同的不同的地方，我把它？

來源

2017-02-17 ErnieKev

Angular對樣式添加組件進行樣式封裝。

組件獲得像_ng_context-xxx這樣的屬性，並添加了獨特的xxx。在將CSS添加到DOM之前，CSS選擇器將被重寫爲僅匹配這些屬性。

又見https://angular.io/docs/ts/latest/guide/component-styles.html

來源

2017-02-17 13:10:44

嗯。我知道這樣的功能。但是，這將如何改變觀點？這是否意味着每次我想要做一些簡單的事情，如#someId {top：20px; }，我需要注意我是否將其聲明在最低級別或父級別？ – ErnieKev

在軟件開發中，您通常應該始終關心將東西放在哪裏;-)實際上，這是關於限制添加到組件的樣式以影響此組件，而不是其他任何東西 - 這通常被認爲是一件好事。如果您想影響整個頁面，只需在Angular外部添加樣式。如果你想有跨越組件邊界的樣式，你可以使用'/ deep /'。另見http://stackoverflow.com/questions/34542143/load-external-css-style-into-angular-2-component/34963135#34963135 –

嗨@Gunter。謝謝。我同意這一點。但是，我無法理解爲什麼這個特定的例子有所不同。不應該風格真的不受你放在哪裏的影響。例如，如果我想設置id =「test」的某個項目爲藍色，那麼將它放在最低級別或全局樣式表（儘管最佳實踐將是最低級別）應該沒有關係。我只是不能得到我的頭爲什麼，在這種情況下，我得到不同的結果 – ErnieKev

將CSS放在應用程序的不同部分會產生不同的效果

回答

相關問題