CSS中'！important'的反義詞是什么？

Question

我正在構建一個jQuery插件，它使用CSS樣式為嵌套的DIV標簽添加顏色和邊距。 由於我寧願將插件保存為單個文件，因此我的代碼使用jQuery的.css()方法將這些顏色和邊距直接作為CSS屬性添加到DIV中。 （初始化插件時，可以自定義這些屬性的值。）

但是，我還希望讓用戶能夠使用自己的樣式表來設置這些DIV的樣式，因此我還要為每組DIV添加類（其名稱也可以自定義）。 這似乎是提供兩全其美的最佳方式。

唯一的缺點似乎是inline style="..."屬性（由jQuery的.css()方法生成）總是覆蓋外部樣式表中設置的類樣式。 當然，我可以在樣式表中使用!important樣式，但一次又一次地執行此操作非常麻煩。

所以：我真正想要的是一種方法，使聯樣式自動采取比外部類樣式較低的優先級，而無需進行外部類樣式!important 。

我還沒有讀過這樣的事情。 有什么建議？ （或者：我是否應該采用另一種方法來設計插件中的DIV？）

Answer 1

一般來說，如果你正在考慮使用!important ，那么你應該考慮整理你的樣式表。

!important可能對強迫事物的行為很有用，但大多數時候它都是過於復雜的CSS的指標。

沒有相反的!important （甚至沒有分配重要性水平的能力），但如果有，則可能適用同一點。

CSS規則以非常嚴格的優先順序應用，如果您遵循如何應用CSS的最佳實踐（即樣式元素名稱和類名優先於ID和內聯樣式），那么通常可以覆蓋不需要訴諸!important 。

我發現我真正需要的唯一一次!important是我在一個樣式表上工作，該樣式表在CMS模板定義的現有樣式之上分層，我沒有任何控制權。

在您的情況下 ，您使用jQuery設置內聯樣式。 如果你想獲得斑點效果，這是一件非常好的事情。 但是，為了執行一般樣式，可以覆蓋它，如果你在CSS中定義了這些樣式，並使用jQuery添加或刪除類名以便應用這些樣式，那么你會更好。

這樣您就可以將樣式應用於元素組，但仍然可以根據需要覆蓋它們。

希望有所幫助。

Answer 2

什么是相反!important的CSS？

沒有完全相反的，但優先級選擇器較低。

w3c規范定義了級聯 ，不妨閱讀它。

內聯樣式具有最高優先級，並且您使用的是低優先級樣式，您需要通過樣式表或style元素添加CSS。

因為您使用的是jQuery，所以添加自定義樣式元素非常簡單 ：

$('<style type="text/css">.foo {color: #FF0000;}</style>').prependTo('head');

您將要發現的問題是，在樣式表中指定了.foo的用戶需要更高的特異性來贏得style元素，因此我建議為每個元素使用一個額外的類，以便用戶可以覆蓋默認值：

.foo.override { color: #0000FF; }

在所有情況下，您都希望仔細挑選您的選擇器，以盡可能減少特異性。

Answer 3

你可能做的是prepend一個新的風格，以head頁面，然后調用風格在你的腳本。

就像是

$("<style type='text/css'> .theStyle{ //WHATEVER} </style>").prepend("head");

然后，您可以在腳本中使用addClass

$("whatever").addClass("theStyle");

因為您要將其添加為head的第一件事，所以其他樣式表應該覆蓋樣式。

因此，您的用戶可以將.theStyle規則添加到其中一個.css文件中，它應該可以正常工作。

編輯

根據下面的@ zzzzBov評論來澄清

style是一個內部樣式表和我提到的.css文件是外部樣式表

只有特異性更高時， 外部才會優先。

為此，您需要繼續在腳本.theStyle調用您的css，並且您需要讓您的用戶為該樣式分配一個元素，例如div.theStyle ，它具有更高的特異性並將覆蓋前者。

順便說一句：@Spudley是對的!important 。

Answer 4

這是不可能的。 我建議你的插件中有一個額外的選項可以打開或關閉樣式，只根據該選項添加css。

Answer 5

你不能這樣做。

內聯樣式始終優先於樣式表中的樣式。

使用!important是使樣式表樣式優先於內聯樣式的正確方法。

Answer 6

您可以始終使用條件語句來查看CSS是否已經設置，如果已經設置，則不要使用jQuery再次設置它。

Answer 7

一些插件的工作方式是提供一個開發人員可以用來覆蓋默認類名的參數。 因此，如果他們想要覆蓋你的樣式，他們可以提供一個前綴參數，使所有的類名都是prefix.yourdefaultclassname。