在網頁中向子元素級聯非繼承屬性（例如文本顏色）而不明確告知子元素從父元素繼承

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瀏覽器，反正），但它有點哈克（但它總是有點哈克改變網站的風格）

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

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

嘗試在開發者控制檯，以及堆棧溢出的樣子聖帕特里克節！

此外，還沒有在Chrome & Safari之外進行測試，但它可能會滿足您的需求。