與Angular4

在我app.component.css我有以下幾點：與Angular4

* ~ * { 
    margin-top: 24px; 
}

這也適用於一些邊距到之後的第一個所有元素。這不是我想要的，因爲我只需要瞄準我的主人的直接孩子。所以我做了以下內容：

:host > * ~ :host > * { 
    margin-top: 24px; 
}

不幸的是這並不做任何事情。我在這裏錯過了什麼？

2017-08-16 Scipion

組件的樣式是關於對組件本身進行樣式設置的，而不是對當前組件外的其他組件的樣式。所以我認爲這甚至不應該起作用。您需要將此樣式添加到父組件。 –

你能否嘗試更好地解釋你確切想要發生的事情，而不是（或除了）你不想要的東西？ –

我想你需要用組件的實際選擇器（標記名稱）替換第二個'：host'。我不知道如何解決組件的直接子對象，因爲您需要使用':: ng-deep'來穿透組件邊界並使用'>'來處理直接的子對象。我不知道這些是否以及如何組合。 –

你只需要一個:host > - 兄弟組合子將涉及兩個*選擇適合你：

:host > * ~ *

該讀作

選擇任何元素
這是任何一個下面的兄弟元素
這是主機元素的子元素。

...這意味着選擇器的主題是與它所跟隨的元素相同的主機元素的子元素，因爲這就是「兄弟」這個詞的意思。

2017-08-16 12:26:11 BoltClock

對我來說，他看起來像他試圖解決遞歸子（childs是與當前組件相同的組件類型），但它不是很清楚。 –

@GünterZöchbauer：「這不是我想要的，因爲我只需要瞄準我的主人的直接孩子。」我讀過，因爲提問者只想將'*〜*'邏輯應用於主機元素的子元素。對我來說似乎相當清楚。 – BoltClock

答案正是我一直在尋找的。歡呼你倆 – Scipion

回答