在某个元素下重置和推翻 CSS答案

【问题标题】：Resetting and Overrulling CSS under a certain element在某个元素下重置和推翻 CSS
【发布时间】：2011-11-21 14:00:42
【问题描述】：

我有可以使用 Firefox 插件注入任何页面的元素。

自然，它及其祖先会受到该页面上定义的 CSS 规则的影响。

我可以通过简单地明确每个属性来做到这一点，但即便如此，我的声明也可能被页面上更早的更具体的声明所覆盖。

如果不把不必要的特定选择器和!important 的使用弄得一团糟，我怎么能在给定元素（div#my_root_container_element）下重置所有元素的属性，并确保我在这个父元素下的声明适用。

使用 iFrame 是一种选择，但如果可能，我宁愿避免使用它 - 还有其他方法吗？给定应用程序，解决方案只需要在 Firefox 中运行。

谢谢。

【问题讨论】：

AFAIK 明确指定所有相关的 CSS 属性以及 !important 是唯一的方法。如果您的 CSS 选择器使用 ID，那么它的特异性就足够高，没有网站规则会覆盖它。

【解决方案1】：

显然，这似乎旨在覆盖作为一般 CSS 核心的“特异性”，但这是我记得见过有人尝试它的最接近的一次。当时参与 YUI 项目的人似乎有点声望：

【讨论】：

【解决方案2】：

使用 SASS，将所有内容嵌套在具有 ID 的 div 下以实现足够的特异性并不是太不受欢迎的，这是我选择的解决方案。

也就是说，页面 CSS 中的任何 !important 声明都会取代我的样式。

【讨论】：