javascript - 保护元素不受全局 CSS 影响

Question

我的 js 嵌入了第三方网站，它创建了一个 <iframe>其中包含一个简单的评论面板，但显然在这个特定的网站上有一个 CSS 样式表，它为每个 <iframe> 设置样式。使用 !important 在 dom 中标记flag ，所以我不能改变那些 css 规则，网站开发团队也不会改变这种行为，还有另一种方法可以克服这个问题吗？我可以更改 tagname 吗仍然是一个 iframe？任何事物？

Answer 1

您可以使用 all 属性和 initial 值来为该元素设置默认样式。

来自docs :

The all CSS shorthand property sets all of an element's properties (other than unicode-bidi and direction) to their initial or inherited values, or to the values specified in another stylesheet origin.

代码示例:

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

只需针对您的特定 iframe 就可以了。