jquery - CSS中 '!important'的反义词是什么？

Question

我正在构建一个 jQuery 插件，它使用 CSS 样式为嵌套的 DIV 标记添加颜色和边距。由于我宁愿将插件保留为单个文件，我的代码使用 jQuery 的 .css() 方法将这些颜色和边距作为 CSS 属性直接添加到 DIV。 (这些属性的值可以在插件初始化时自定义。)

但是，我还想让用户能够使用他们自己的样式表来设置这些 DIV 的样式，因此我还向每组 DIV 添加类(也可以自定义名称)。这似乎是提供两全其美的最佳方式。

唯一的缺点似乎是内联 style="..." 属性(由 jQuery 的 .css() 方法生成)总是覆盖在外部样式表。当然，我可以在样式表中使用 !important 样式，但一次又一次地这样做很麻烦。

所以:我真正想要的是一种使内联样式自动比外部类样式具有较低优先级的方法，而不必使外部类样式!important.

我还没有读到过这样的事情。有什么建议么？ (或者:我应该采用另一种方法在插件中设置我的 DIV 样式吗？)

Answer 1

What's the opposite of !important in CSS?

没有完全相反的选择器，但有优先级较低的选择器。

w3c spec defines the cascade ，不妨读一读。

内联样式具有最高优先级，而您在低优先级样式之后，您需要通过样式表或 style 元素添加 CSS。

因为您使用的是 jQuery，所以添加自定义样式元素非常容易:

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

然后您将发现的问题是，在样式表中指定了 .foo 的用户将需要更高的特异性才能胜过 style 元素，所以我建议为每个元素使用一个额外的类，以便用户可以覆盖默认值:

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

在所有情况下，您都需要仔细选择选择器，以尽可能降低特异性。