Css 如何将div和decedents的所有样式重置为Chrome默认值

我不确定这是否可行，但我想为div和子体将所有用户样式设置回chrome默认值

我正在构建一个Chrome插件，它可以在任何网页上创建一个弹出窗口，但是由于每个网页都有过多的自定义样式，试图追踪每个不一致性，并用我的divs（和后代）自定义样式覆盖它，这正成为一场噩梦

每次我认为我已经涵盖了所有的基础，另一个网站实现了其他需要覆盖的东西

在这种情况下，标准化弹出窗口的最简单方法是什么

我能想到的一种方法是（咬紧牙关）掌握默认的Chrome CSS样式，并将它们实现为一系列“一网打尽”的后代选择器，但肯定有更好的方法。

若您想绝对确保元素的样式不受网页CSS的影响，有两种可能的解决方案：

使用

iframe

实现弹出窗口。（此解决方案“安全”且足够简单，但基于弹出窗口和网页之间的交互方式，可能会变得很麻烦。）

使用。（这可能是“合适的”解决方案，但实现可能要复杂一些。）

关于第二个解决方案的一些资源：

• 介绍性的
• 将“影子DOM”概念合并到Chrome扩展中的一个实际示例：
  RobW的

---

还有第三个选项值得讨论和拒绝，那就是将div及其子代的所有样式属性重置为默认值。伪代码：

#my-div, #my-div * {

  @for-every-css-property {

    %propertyName: initial !important;

  }

}

显示了对这种解决方案的尝试。它使用特定值而不是

initial

，这将在没有

initial

关键字的旧浏览器中工作，但不会正确重置默认值与基本值不同的元素（例如，user566245提到

textarea

元素应该有边框）
问题：
• 不幸的是
• 如果我们不使用

  ！重要信息

  以上，则页面可能会提供一条规则，该规则包含更具体的选民，而该选民会凌驾于我们自己的选民之上。例如，如果页面为

  table>tr>td

  指定了属性，那么这将应用于我们的规则，因为该选择器比

  #my div*

  更具体
• 因为我们使用的是

  ！重要信息

  ，重置后要进行的任何自定义样式也必须使用

  ！重要信息

  ，适用于所有酒店
• 如果页面恰好在我们使用

  的页面之后插入任何其他CSS样式！重要信息

  然后这些可以覆盖我们的重置
• 这是相当低效的。我们要求浏览器对div下的每个元素应用大量CSS规则
• 还应重置特定于供应商的属性。（例如，

  -webkit动画名称

  ）
• 如果将来出现新的CSS属性，则需要更新列表
虽然这个解决方案可以应用到当前的浏览器上，但它相当可怕，所以请使用shadowdom！同时，我推荐
解决方案

---

我不知道是否有人尝试过这一点，但更有效的解决方案可能是使用Javascript来检测哪些站点定义的CSS属性可能有问题，并仅重置这些属性。
总是很乐意提供帮助！（如果你真的喜欢答案，请随意投票：）我很想看到一个使用shadowdom实现这一点的例子。它将很快出现在Firefox中，并且已经出现在Safari和Chrome中。当然应该有更好的方法。：）我们可以这样做，但我们想做相反的事情：从页面范围的CSS中退出！