css - Hawtio - 一个插件的 CSS 会影响另一个插件的 CSS

Question

我们将许多 Hawtio 插件(作为 .war 文件)部署到我们的 JBoss Fuse/Karaf 服务器。我们注意到，由于我们为我们的 HTML 元素重复了一些类和 ID 名称，插件 A 的 CSS 行为会影响另一个插件插件 B 的样式，尤其是当我们引用 Bootstrap 特定名称(如 col-lg)时-12 等等。此外，即使插件 A 中没有打包 bootstrap.css 文件，我们也能够使用类似 Bootstrap 的行为，这似乎是从插件 B 的 bootstrap.css 文件中引用的。我们意识到 ids 和 classes 对整个 Hawtio 环境都是全局的(我们不知道这是否仅在 CSS 中才会发生)。有关如何解决此问题的任何提示？

谢谢。

Answer 1

目前情况确实如此，CSS 选择器适用于页面中的所有元素，无论它们如何到达那里。

最终这个问题的一个很好的解决方案是网络组件，在具有适当支持的浏览器(目前是 Chrome 和 Opera)中，您可以在网络组件中获得 CSS 隔离，您可以在其中为网络组件中的元素定义 CSS，并且它不会泄漏并影响其他元素。要为页面中的网络组件设置样式，您必须使用特殊的选择器，这样网络组件就不会受到全局 CSS 规则的影响。