css 变量 :root 与 :host
css variables :root vs :host
刚刚开始网络开发（来自 android）
在我的项目中，我尝试分配变量，因为在“：root”的帮助下提到了许多教程：
:root {
--accentColor: #20a8d8;
--primary: #96a1a5;
--secondary: #415a72;
--bgColorrr:#1e2e38;
}
但这根本不起作用。
将其更改为“:host”后它仍然有效 - 有人可以解释一下 :root 不起作用的原因吗？
可能值得一提：我在我的自定义组件 (Angular 5) 上使用了它，并且我正在使用 CoreUI（以防可能影响某些 CSS）
你说的是 影子 DOM。元素可以获得与其关联的一种新型节点。这种新型节点称为 shadow root。具有关联影子根的元素称为 影子主机。不呈现影子主机的内容；影子根的内容被渲染。有一个叫做 Style Encapsulation.
的东西
我还建议避免使用 :root。我知道文档说要使用 :root 并且从技术上讲我认为在文档级别这样做很好，但是您使用的是框架可能 Shadow [=35] 内部存在冲突=] 并导致错误。一起避免 :root 可能只是养成一个好习惯。 @pb4now 如果我完全错了，请纠正我。
这里有更多关于 Shadow DOM 的信息，阅读更多关于 Angular 样式组件的信息。希望对你有帮助。
刚刚开始网络开发（来自 android） 在我的项目中，我尝试分配变量，因为在“：root”的帮助下提到了许多教程：
:root {
--accentColor: #20a8d8;
--primary: #96a1a5;
--secondary: #415a72;
--bgColorrr:#1e2e38;
}
但这根本不起作用。 将其更改为“:host”后它仍然有效 - 有人可以解释一下 :root 不起作用的原因吗？
可能值得一提：我在我的自定义组件 (Angular 5) 上使用了它，并且我正在使用 CoreUI（以防可能影响某些 CSS）
你说的是 影子 DOM。元素可以获得与其关联的一种新型节点。这种新型节点称为 shadow root。具有关联影子根的元素称为 影子主机。不呈现影子主机的内容；影子根的内容被渲染。有一个叫做 Style Encapsulation.
的东西我还建议避免使用 :root。我知道文档说要使用 :root 并且从技术上讲我认为在文档级别这样做很好，但是您使用的是框架可能 Shadow [=35] 内部存在冲突=] 并导致错误。一起避免 :root 可能只是养成一个好习惯。 @pb4now 如果我完全错了，请纠正我。
这里有更多关于 Shadow DOM 的信息，阅读更多关于 Angular 样式组件的信息。希望对你有帮助。