保护元素不受全局css的影响

Question

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

Answer 1

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

来自文档：

all-CSS简写属性设置元素的所有属性(除了unicode bidi和direction(转换为其初始值或继承值值，或在另一个样式表源中指定的值。

一个代码示例：

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

只要瞄准你的特定iframe，你就应该没事了。

Answer 2

CSS Specificity是您的朋友。从这个概述：

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

粗体部分表示可以向有问题的元素添加一个类，并覆盖更通用的iframe-css定义。