创建一个非常低的特异性CSS属性

我想创建一个使用JavaScript的非常低的特异性CSS属性。就像!unimportant（哪个不存在）创建一个非常低的特异性CSS属性

我不知道这是否可能。

我寻找类似!unimportant之类的理由是我正在写一个小的JavaScript插件。我想在其中添加一个默认样式到一个元素，这个元素后来应该很容易被用户覆盖。

但如果我写：

element.style.backgroundColor = "green";

用户将不能够容易地替换掉上面的样式，而无需使用!important。

var style = document.createElement('style'); 
// WebKit hack :(
style.appendChild(document.createTextNode("")); 
document.head.appendChild(style);

，然后上面的代码中，我使用下面的代码添加动态样式表：

var element = document.getElementById('main'); 
// To use attribute names to apply the styles 
element.setAttribute('custom-el', '1'); 

var sheet = style.sheet; 
var properties = "background-color: green;"; 
var elName = "[custom-el]"; 

if (sheet.insertRule) { 
    sheet.insertRule(elName + "{" + properties + "}", 0); 
} else if (sheet.addRule) { 
    sheet.addRule(elName, properties, 0); 
}

现在background-color: green可以是这样，我用下面的代码添加了动感的风格标签通过使用下面的代码重写：

div.main { 
    background-color: red; 
}

但你可以在CSS看到，我用较高的特异性覆盖background-color: green即div + .green。

但我希望被覆盖的，甚至当用户写下面的CSS发生：

.main{ /* Could be simple class name or id name or even tag name */ 
    background-color: red; 
}

Fiddle

这可能似乎是一个小问题。但对我来说这是一个很大的问题。请帮忙。

来源

2015-01-12 Mr_Green

不知道我是否完全理解了你，但是如何在'element'（如'div'）上设置基础样式？ – Harry

@Harry如果我将样式应用于'div'标记，那么它将应用于所有div元素。我不是在寻找...... –

为什么不使用！对“overrided”css重要，然后内联样式被忽略 – Hacketo

我只想写这样的：

element.style.backgroundColor = element.style.backgroundColor || "green";

的地方，如果backgroundColor是不确定的，然后它使用因为其他的backgroundColor它会采取backgroundColor从样式表。

来源

2015-01-12 08:12:16

可以说'backgroundColor'是未定义的。然后，'green'颜色将应用于我无法在CSS中使用'.main {background-color：red; }'。要覆盖，我应该使用'！important'，我不想使用，正如我在我的文章中所解释的。 –

不，因为您在样式表中使用红色作为backgroundColor，所以它使用该颜色.... –

我无法得到..请检查此[小提琴]（http://jsfiddle.net/hxyk7cx4/2/）。 –

最后我得到了答案..

document.head.insertBefore(style, document.head.children[0]);

我应该只是上面插入在head标签已经存在样式表的动态样式表。

Working Fiddle

不幸的是，这是不以任何版本的IE浏览器工作。我仍在寻找答案。

来源

2015-01-12 08:15:01

@downvoters请解释downvote –

创建一个非常低的特异性CSS属性

回答

相关问题