Question

我正在开发Chrome扩展程序，HTML子树和CSS样式表被注入原始页面。我希望注入的HTML子树不受原始CSS的影响，但我不知道如何完美地完成这项工作。问题：

<!DOCTYPE html>

<style>

/* original CSS */
input[type="text"] {
    background: green;
}

input[type="text"]:focus {
    background: yellow;
}

/* my injected CSS somewhere else */
.injected-root input[type="text"] {
    border: solid 1px navy;
}
</style>

<input type="text" value="original text">
<div class='injected-root'>
    <input type="text" value="injected text">
</div>

原始页面是互联网上的随机页面，因此无法知道原始CSS会是什么。从上面的代码中可以看出，我的注入文本输入受到原始CSS的影响，我知道可以通过使用新的默认值覆盖原始CSS来修复它：

.injected-root input[type="text"] {
    border: solid 1px navy;
    background: white;
}

.injected-root input[type="text"]:focus {
    background: white;
}

但我不认为这样做是可行的＆＃34;手动＆＃34;通过提供每个默认属性。

所以，问题是：

有没有办法完全重置子树的样式？

或

制作子树的任何其他策略似乎都在一个孤立的宇宙中＃34; （仅受其自己注入的CSS影响）？

Answer 1

A）是的，您可以重置DOM的“子树”的样式，但这意味着当它们嵌套在.injected-root内时覆盖所有ALL元素的样式。由于您无法知道应用原始样式的特殊性，因此您可能只需使用!important来重置原始样式。这将引导您进入!important - 地狱时将样式应用于您自己的元素。

B）是的，更好的解决方案是提供一个Web组件并使用shadow DOM插入元素并应用样式。

请参阅：

Answer 2

虽然<iframe>可能是最普遍的方式，但CSS3中有一个新属性，最终会允许这样做。 all属性允许控制所有CSS属性的继承。不幸的是，browser support尚未普及，但由于它听起来像是针对Chrome，所以也许这并不重要。

您想要的规则是：

.injected-root {all: initial;}

示例：http://codepen.io/anon/pen/pbPKby

如何＆＃34;重置＆＃34; DOM子树的CSS风格？

2 个答案: