css - 在 Angular4 的 CSS 中使用主机直接子节点

Question

在我的 app.component.css 中有以下内容:

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

它确实对第一个元素之后的所有元素应用了一些 margin-top。这不是我想要的，因为我只需要针对我的主机的直接子级。所以我做了以下事情:

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

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

Answer 1

您只需要一个 :host > — 兄弟组合器将为您关联两个 * 选择器:

:host > * ~ *

这读作

Select any element
that is a following sibling of any element
that is a child of the host element.

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