忽略/覆盖周围/继承的CSS [英] Ignore/override surrounding / inherited CSS

问题描述

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

I have this call to add HTML/CSS to an existing page:

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 /样式。

I am creating a Chrome Extension that helps developers. What's happening is that the above HTML is inheriting the existing CSS from developer's pages. I want the styling of the above HTML to be independent from the CSS/styling on the developer's page.

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

Is there a way to ignore all existing CSS on page? I'd like to basically create a "CSS sandbox".

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

I think one way to create such a sandbox, would be an iframe, but I am looking for a simpler way to do that.

推荐答案

为你的元素添加类想要重置..然后将 all：unset 应用于该类

Add a class to elements which you want to reset..and then apply all:unset to that class

所有 CSS简写属性设置全部元素的属性（除了unicode-bidi和direction）到其初始值或继承值，或者在另一个样式表原点中指定的值。

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

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

Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not.(It will ignore all the user agent style too.)

Stack Snippet

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;
}

这篇关于忽略/覆盖周围/继承的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！