Question

我正在尝试创建一个将CSS规则注入页面的jQuery插件。我正在使用addRule和insertRule。出于某种原因，addRule会从您传递给它的任何规则中删除!important。有没有办法可以阻止它这样做，或者我可以发送一个标志来将该规则标记为重要的功能？我看了documentation for 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是一个更强大的功能。

Answer 1

我不相信!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.

防止addRule剥离！重要

1 个答案: