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

【问题标题】：Hawtio - CSS of a plugin affects CSS of another pluginHawtio - 一个插件的 CSS 会影响另一个插件的 CSS
【发布时间】：2015-02-10 17:55:45
【问题描述】：

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

谢谢。

【问题讨论】：

标签： css hawtio

【解决方案1】：

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

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

【讨论】：