忽略/覆盖周围/继承的CSS

Question

我有这个调用将HTML / CSS添加到现有页面：

let div = document.createElement('div');
div.style.zIndex = 9999999;
div.innerHTML = str;  // some pre-defined HTML string
document.body.insertBefore(div, document.body.firstChild);

我正在创建一个帮助开发人员的Chrome扩展程序。发生的事情是上面的HTML继承了开发人员页面中现有的CSS。我希望上面HTML的样式独立于开发人员页面上的CSS /样式。

有没有办法忽略页面上所有现有的CSS？我想基本上创建一个＆＃34; CSS沙箱＆＃34;。

我认为创建这样一个沙盒的一种方法是iframe，但我正在寻找一种更简单的方法。

Answer 1

向要重置的元素添加class，然后将all:unset应用于该类

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

... all:unset

指定所有元素的属性如果默认继承，则应更改为inherited值，否则更改为初始值。（它也将忽略所有用户代理样式。）< / em>的

Stack Snippet

let p = document.createElement('p');
p.style.color = "red";
p.innerHTML = "Hello"; // some pre-defined HTML string
p.classList.add("reset");
document.body.insertBefore(p, document.body.firstChild);

p {
  background: black;
}

.reset {
  all: unset;
}