防止addRule剝離重要

我正在嘗試製作一個jQuery插件，它將CSS規則注入頁面。我正在使用addRule和insertRule。由於某種原因，addRule會將您傳遞給它的任何規則去掉!important。有沒有辦法阻止它這樣做？或者我可以發送一個標誌來標記規則是重要的標誌？我看着documentation for addRule，但沒有提及！重要的聲明。防止addRule剝離重要

document.getElementsByTagName('head')[0].appendChild(document.createElement('style')); 
 
var sheet = document.styleSheets[document.styleSheets.length-1]; 
 
sheet.addRule('body','color: green !important');

h1 { 
 
    color: yellow; 
 
}

<h1>Test text</h1>

順便說一句，我只使用addRule爲了與舊版本的Internet Explorer的兼容性。我知道insertRule是一個更強大的功能。

來源

2014-12-29 Alex W

.... @CayceK我與開發工具，當一個樣式表存在，這並不工作驗證（所以你的代碼段不會在所有的工作在這裏...） –

。我在上面的代碼片段中添加了一個樣式表。 –

[這裏是添加樣式表的小提琴。]（http://jsfiddle.net/xo1oyp4d/）這很好奇，因爲我知道我已經完成了這個[確切的事情]（http://davidwalsh.name/add之前的樣式表）。 – bishop

我不相信!important像你期待的氣泡。 !important允許規則優先於具有相同選擇器的其他規則。考慮this example：

<style> 
#me { color:blue !important; } 
</style> 
<p id='me'>Hello, World</p> 
<script> 
sheet.addRule('#me','color: green !important;'); 
</script>

你會發現，#me應該是樣式表藍色的，但它是由addRule覆蓋。

在你的例子中，你說你想讓主體顏色滲透到段落中，但!important是關於在具有相同選擇器而不是層次結構的規則之間進行選擇。 CSS Tricks has some words on this.在這種情況下，沒有樣式表

來源

2014-12-29 19:04:12 bishop

經過一些測試，我認爲選擇者的特異性是問題，而不是'！important'被剝離。看起來很重要*不允許不太具體的選擇器覆蓋更具體的選擇器。 –

確實很微妙的差異，它解決了與CSS中使用的'addRule'相同的選擇器。下面是你的小提琴的固定版本：http://jsfiddle.net/xo1oyp4d/14/我在頁面的CSS中添加了'！important'，這樣我就可以檢查它是否被正確覆蓋。 –

@AlexW：很高興它已經修復！對於未來的路人，以下是技術意義上的[MDN必須對特異性]（https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity）的說明。 – bishop

防止addRule剝離重要

回答

相關問題