将非继承属性（例如文本颜色）级联到网页中的子元素，而不明确告知子元素从父级继承

Question

有没有办法将非继承属性（如文本颜色）级联到网页中的子元素，而不明确告知子元素从父节点继承

我正在尝试编写一个重新设置网页的小应用程序（例如google，msn.co.uk）。通过以下方式将样式注入体内，样式包括颜色，背景颜色

document.body.style.color='green';

然而，身体内包含自己风格的元素不会继承颜色，例如具有自己的样式<div id="testing" style="color": blue">的div元素仍显示为蓝色。

我目前的理解是这是一个继承问题，并不是所有属性都是从父容器自动继承的，并且对于要继承的样式，必须通过执行类似

之类的操作来更改颜色以继承

document.getElementById('testing').style.color='inherit';

在这种情况下，它会从身体继承颜色。但是在这种情况下，我必须通过所有子元素明确告诉他们从父级继承（我实际上可以将这些子元素设置为与主体相同的颜色）

我猜这是遗传问题，而不是特异性问题

Answer 1

我不知道是否有一种优雅而美好的方式来做你想做的事。但是：为了好玩，我尝试将CS​​S写入我通过JS添加的<style>元素，因此我可以在声明中使用CSS选择器并使用!important规则。它似乎有用（无论如何都在Chrome和Safari中），但它有点hacky（但改变网站的样式总是有点hacky）

var overrides = document.createElement("style");
overrides.type = "text/css";
document.head.appendChild(overrides);

overrides.innerText = "body, body * { background: green !important }";

在开发者控制台中尝试，Stack Overflow看起来像圣帕特里克节！

同样，还没有在Chrome＆amp; Safari，但它可能适合您的需求。