保护元素不受全局CSS影响

Question

我的js嵌入到第三方网站中，并创建了一个<iframe>，其中包含一个简单的注释面板，但是显然在此特定网站上有一个CSS样式表，该样式表为dom带有<iframe>标志，因此我无法更改这些CSS规则，并且网站开发人员团队也不会更改此行为，还有另一种方法可以解决此问题？我可以更改!important并仍然是iframe吗？有什么事吗

Answer 1

CSS特殊性是您的朋友。从这个overview：

1. 特异性确定浏览器将应用哪个CSS规则。
2. 特殊性通常是CSS规则不适用于某些元素的原因，尽管您认为它们应该适用。
3. 每个选择器在特异性层次结构中都有其位置。
4. 如果两个选择器应用于同一元素，则特异性更高的选择器将获胜。
5. 有四个不同的类别定义给定选择器的特异性级别：内联样式，ID，类，属性和元素。 ...

粗体部分表示您可以将一个类添加到有问题的元素中，并覆盖这样的更通用的iframe css定义。

Answer 2

您可以将all属性和initial值一起使用来默认该元素的样式。

来自docs：

  

所有CSS速记属性设置元素的所有属性   （除了unicode-bidi和Direction以外）为其初始或继承的   值，或其他样式表原点中指定的值。

代码示例：

#div-to-reset-styles {
  all: initial;
  * {
    all: unset;
  }
}

只需定位您的特定iframe，就可以了。