级联非继承属性(例如:(文本颜色)到网页中的子元素，而不显式地告诉子元素继承父元素

Cascade non-inherited properties(e.g. text color) to child elements in webpage without explicitly telling child elements to inherit from parent

本文关键字：元素 继承 例如 属性 文本 颜色 级联 网页      更新时间：2023-09-26

是否有一种方法可以将非继承属性(如文本颜色)级联到网页中的子元素中，而不显式地告诉子元素从父节点继承

我正试图写一个小的应用程序，重新设计一个网页(例如:谷歌,msn.co.uk)。样式包括颜色、背景色，通过以下操作将样式注入正文

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

元素，但在正文中包含自己的样式不继承的颜色，例如，div元素与自己的样式<div id="testing" style="color": blue">仍然显示蓝色。

我目前的理解是，这是一个继承的问题，并不是所有的属性都自动继承自父容器，对于要继承的样式，一个人必须改变颜色继承做一些像

document.getElementById('testing').style.color='inherit';
在这种情况下，它将从body继承color。然而，在这种情况下，我必须遍历所有子元素，明确地告诉它们从父元素继承(我实际上可以将这些子元素设置为与body相同的颜色)

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

我不知道是否有一种优雅的方式来做你想做的事情。但是:只是为了好玩，我尝试通过JS为<style>元素编写CSS，这样我就可以在声明中使用CSS选择器并使用!important规则。它似乎可以在Chrome上工作。Safari，不管怎样)，但它有点俗气(但改变网站的样式总是有点俗气)

var overrides = document.createElement("style");
overrides.type = "text/css";
document.head.appendChild(overrides);
overrides.innerText = "body, body * { background: green !important }";

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

再次强调，我还没有在Chrome之外测试过它&

相关文章：