css - 根据 body 标签类/属性在组件中应用不同的样式

Question

我试图让我的组件中的文本颜色根据我页面上 body 标签的类别进行更改，但是由于封装(我认为)使用这样的东西不起作用 -

body.pink p
{
  color: pink;
}

body.blue p
{
  color: blue;
}

SO 上有很多帖子询问如何从组件内部更改 body 的样式，但我恰恰相反。

编辑:明确一点，我只希望 CSS 影响我的组件，它们只需要在 body 更改时更改。

Answer 1

以下组件 CSS 语法似乎有效:

body.pink :host p {
  color: pink;
}

body.blue :host p {
  color: blue;
}

参见 this stackblitz用于演示。