創建一個非常低的特異性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屬性

回答

相關問題