有没有办法在不使用iframe的情况下将HTML块“沙箱”远离其页面的CSS？

Question

例如，是否可以让div完全忽略CSS规则，无论它包含哪些class es和id？

Answer 1

不，如果没有iframe，这是不可能的。

您必须重置div的所有现有CSS规则，如下所示：

div.sandbox
 {
    font-size: ....
    font-family: ..........
    margin: .........
    padding: .........
    line-height: .........
  }

虽然困难且从不100％可靠，但可能以这种方式获得可用的结果。您可以查看其中一个“重置样式表”，例如Eric Meyer's，以获取要重置的重要属性列表; here声称是CSS 2.1属性的完整列表 - 不包括CSS 3和特定于供应商的属性，您也必须考虑这些属性。

第三方小部件的提供商经常将其“重置CSS”硬编码为HTML元素中的内联CSS，以覆盖威胁覆盖沙盒类规则的任何!important规则。

Answer 2

可能会给出结果：

div {
 all:unset !important;
 clear:both !important;
 margin: 0 !important
}

内联样式将覆盖任何CSS样式。 这也意味着javascript设置的任何样式都会覆盖任何css规则，因为javascript是以内联方式设置样式。

同样，直接在html部分上的样式标记之间的任何样式都将覆盖在css文件上设置的样式。 在任何情况下，内联风格都会分层次地统治其他任何内容。