与Angular4

问题描述：

在我app.component.css我有以下几点：与Angular4

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

这也适用于一些边距到之后的第一个所有元素。这不是我想要的，因为我只需要瞄准我的主人的直接孩子。所以我做了以下内容：

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

不幸的是这并不做任何事情。我在这里错过了什么？

组件的样式是关于对组件本身进行样式设置的，而不是对当前组件外的其他组件的样式。所以我认为这甚至不应该起作用。您需要将此样式添加到父组件。 –

你能否尝试更好地解释你确切想要发生的事情，而不是（或除了）你不想要的东西？ –

我想你需要用组件的实际选择器（标记名称）替换第二个'：host'。我不知道如何解决组件的直接子对象，因为您需要使用':: ng-deep'来穿透组件边界并使用'>'来处理直接的子对象。我不知道这些是否以及如何组合。 –

答

你只需要一个:host > - 兄弟组合子将涉及两个*选择适合你：

:host > * ~ *

该读作

选择任何元素
这是任何一个下面的兄弟元素
这是主机元素的子元素。

...这意味着选择器的主题是与它所跟随的元素相同的主机元素的子元素，因为这就是“兄弟”这个词的意思。

对我来说，他看起来像他试图解决递归子（childs是与当前组件相同的组件类型），但它不是很清楚。 –

@GünterZöchbauer：“这不是我想要的，因为我只需要瞄准我的主人的直接孩子。”我读过，因为提问者只想将'*〜*'逻辑应用于主机元素的子元素。对我来说似乎相当清楚。 – BoltClock

答案正是我一直在寻找的。欢呼你俩 – Scipion