Question

我有一个浏览器扩展，可以在页面中添加div元素（和其他元素）。有没有办法确保页面样式不会影响我添加的元素中的样式？

我考虑过把它变成iframe，但是不想再打电话。尽管我添加的信息只是基本文本和链接，但确保覆盖每一种可能的样式似乎也有点多。

Answer 1

我注意到你说你不想使用每种风格，但我想我应该在这里提一下，以防它帮助别人。基本上这是一个可以删除大多数继承/预定义属性的类。您只需将类添加到要排除的任何元素即可。这是一个例子：

.reset {
    background:none;
    border:none;
    bottom:auto;
    clear:none;
    cursor:default;
    float:none;
    font-size:medium;
    font-style:normal;
    font-weight:normal;
    height:auto;
    left:auto;
    letter-spacing:normal;
    line-height:normal;
    max-height:none;
    max-width:none;
    min-height:0;
    min-width:0;
    overflow:visible;
    position:static;
    right:auto;
    text-align:left;
    text-decoration:none;
    text-indent:0;
    text-transform:none;
    top:auto;
    visibility:visible;
    white-space:normal;
    width:auto;
    z-index:auto;
}

现在只需添加“重置”，应将其重新设置为正常。然后，您可以在该行下面定义样式，它们将覆盖重置类中的样式。

您还可以向重置类添加通配符选择器，以便同时定位元素的子项。

.reset,
.reset * { /*...etc */ }

注意：Wildcards are supported by IE8+，所以如果您正在使用IE7或更低版本 - 没有骰子。

css：将div元素与其他页面样式隔离开来

1 个答案: