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

【问题标题】：Cascade non-inherited properties(e.g. text color) to child elements in webpage without explicitly telling child elements to inherit from parent将非继承属性（例如文本颜色）级联到网页中的子元素，而不明确告诉子元素从父元素继承
【发布时间】：2011-12-12 18:41:50
【问题描述】：

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

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

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

但是，body 中包含自己样式的元素不会继承颜色，例如具有自己样式<div id="testing" style="color": blue"> 的 div 元素仍显示为蓝色。

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

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

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

我猜这是继承问题而不是特异性问题

【问题讨论】：

标签： javascript dom inheritance

【解决方案1】：

我不知道是否有一种优雅而美好的方式来做你想做的事。但是：只是为了好玩，我尝试将 CSS 写入通过 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 和 Safari 之外对其进行过测试，但它可能会满足您的需求。

【讨论】：