我写了一个 Google Chrome 扩展程序，它会弹出一个带有自动完成字段的对话框，它有自己的风格，但有些网站我的 CSS 完全损坏，看起来不太好。
我知道如何使用 iFrame 隔离样式，但在 Google Chrome 扩展程序中，无法以这种方式隔离我的 HTML 和 CSS。另一种方法是将我所有的东西包装到一个单独的 div 中，它有自己的 id 和该 id 的相对样式，我这样做了，但它似乎在某些带有“硬”标签样式重载或“! CSS 代码中的重要”指令。
所以，我想知道有什么方法可以方便地真正隔离我的样式，或者我的坏习惯是重载每个小 CSS 属性来修复每个站点的一个或另一个样式问题？
顺便说一句:我将我的 list 设置为加载“document_end”处的所有内容，但我发现它没有应用于每次 DOM 准备就绪时加载的样式表。
最佳答案
在提出问题时，您唯一的选择是使用 iframe 或具有非常高 specificity 的样式表并显式设置所有可能影响样式的属性。最后一种方法很麻烦，因为总会有一些属性被你忽略。因此，隔离样式表的唯一可用方法是使用 iframe。
这个问题的解决方案 - 没有 iframe 的样式隔离 - 是 Shadow DOM (since Chrome 25)。您可以在 HTML5 Rocks 找到教程。 .有关使用 Shadow DOM 隔离样式的真实世界 Chrome 扩展，请参阅 Display #Anchors (source code here)。
关于css - 如何在 Google Chrome 扩展中真正隔离样式表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12783217/