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

Question

有没有一种方法可以将文本颜色等非继承属性级联到网页中的子元素，而不明确告诉子元素从父节点继承

我正在尝试编写一个重新设计网页样式的小应用程序（例如google，msn.co.uk） ）。通过执行以下操作将样式注入到正文中，样式包括颜色、背景色，

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

但是正文中包含自己样式的元素不会继承颜色，例如具有自己样式的 div 元素

仍然显示蓝色。

我目前的理解是这是一个继承的问题，并不是所有的属性都会自动从父容器继承，而对于要继承的样式，一个 来更改要继承的颜色

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

必须通过执行类似的操作 它会从 body 继承颜色，但是在这种情况下，我必须遍历所有子元素，明确告诉它们从父元素继承（我实际上可以将这些子元素设置为与 body 相同的颜色），

我想这是一个继承问题，并且不是具体问题

Answer 1

我不知道是否有一种优雅而美好的方式来做你想做的事。但是：只是为了好玩，我尝试将 CSS 写入通过 JS 添加的

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

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

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

再次强调，尚未在 Chrome 和 Chrome 之外进行测试。 Safari，但它可能可以满足您的需求。