CSS中'！important'的反义词是什么？答案

【问题标题】：What's the opposite of '!important' in CSS?CSS中'！important'的反义词是什么？
【发布时间】：2011-09-22 13:47:29
【问题描述】：

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

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

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

所以：我真正想要的是一种使内联样式的优先级自动低于外部类样式的方法，而不必使外部类样式!important。

我还没有读到过这样的事情。有什么建议么？（或者：我应该采取另一种方法来设置插件中的 DIV 样式吗？）

【问题讨论】：

不要认为这样的事情存在。但也许你可以使用 .addClass() 代替？
是否可以选择提供您的 css 分离？我使用了一些可以做到这一点的插件，并发现它们更容易定制。
@Andre：请举例？
!unimportant 只是意味着你所有的编程都是浪费时间：-p
伙计，我真希望有一个 !unimportant，因为现在它可以让我省去很多头痛和努力修复我们继承的 CSS 混乱的工作。

标签： jquery css

【解决方案1】：

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

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

w3c spec defines the cascade，不妨看看。

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

因为您使用的是 jQuery，所以添加自定义样式元素非常非常简单：

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

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

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

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

【讨论】：

@zzzBov... 看起来我们的想法很相似！
可能更好的解决方案是让用户的CSS使用一个ID，即#wrapper .foo，这样你就不需要通过jQuery添加覆盖了。
@DisgruntledGoat，用户始终可以使用html .foo，但.foo.override 可以理解您正在覆盖默认样式。在 CSS 中尽可能使用最低特异性选择器很重要，添加 [id] 是多余的。
@zzzzBov：我将在一个页面上至少使用这个插件两次，每个实例都可能有不同的样式。所以像#id1 .item 这样的东西可能是必要的。
（在实际实现之后）而不是#id1 .item 我使用.randomclassname .item 并将随机类名添加到插件顶部的this。似乎按我想要的方式工作。

【解决方案2】：

一般来说，如果您正在考虑使用!important，那么您很有可能应该考虑整理您的样式表。

!important 可用于强制执行某些操作，但大多数情况下它表明 CSS 过于复杂。

!important 没有对立面（甚至没有分配重要性级别的能力），但如果有，同样的观点可能适用。

CSS 规则以非常严格的优先顺序应用，如果您遵循如何应用 CSS 的最佳实践（即样式元素名称和类名称优先于 ID 和内联样式），那么通常可以根据需要覆盖事物而不诉诸!important。

我发现我真正需要!important 的唯一一次是我一直在处理样式表，该样式表位于由我没有任何 CMS 模板定义的现有样式之上控制。

在您的情况下，您正在使用 jQuery 设置内联样式。如果您想实现点效果，这是一件非常好的事情。然而，为了执行一般样式，可能会覆盖它，如果您在 CSS 中定义这些样式，并使用 jQuery 添加或删除类名以应用这些样式，则效果会更好。

这将使您能够将样式应用于元素组，但在需要时仍然可以覆盖它们。

希望对您有所帮助。

【讨论】：

【解决方案3】：

您可能会做的是prepend 为页面的head 设置一个新样式，然后在您的脚本中调用该样式。

类似

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

然后你可以在你的脚本中使用addClass

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

因为您将其添加为head 中的第一件事，所以其他样式表应覆盖样式。

因此，您的用户可以将.theStyle 规则添加到他们的其中一个 .css 文件中，它应该可以工作。

编辑

根据下面@zzzzBov 的评论进行澄清

style 是 internal 样式表，我提到的 .css 文件是 external 样式表

外部只有在特异性更大时才会优先。

为此，您需要继续在脚本.theStyle 中调用您的css，并且您需要让您的用户为该样式分配一个元素，例如div.theStyle，它具有更高的特异性并将覆盖前者。

顺便说一句：@Spudley 关于!important 是正确的。

【讨论】：

对于具有同等特异性的选择器，style 将优先于 link[rel="stylesheet"]。
真@zzzzBov。编辑澄清。
我知道我可以使用 jQuery 将样式表添加到 DOM；我没有想到我可以在其他链接样式表之前通过.prepending 来解决级联问题。好主意（尽管我认为你的意思是 prependTo 就像 zzzzBov 说的那样）。

【解决方案4】：

这是不可能的。我建议在你的插件中添加一个额外的选项来打开或关闭样式，并且只添加基于该选项的 css。

【讨论】：

-1 表示建议，这不是一个好方法，尽管您在!important 上是正确的，但没有相反的情况。

【解决方案5】：

您总是可以有一个条件语句来查看 CSS 是否已经设置，如果已经设置，请不要使用 jQuery 再次设置。

【讨论】：

我想知道为什么我从来没有想过这一点。可能是因为为每个属性（边框、边距、填充、颜色、背景颜色等）添加条件会有点压倒性。不过，如果这是唯一的方法......
每次你想使用 jQuery 设置 CSS 时，不要调用 .css 并执行条件语句，只需编写一个自定义函数即可。真的不应该增加太多额外的工作。
Wex：这是真的。我能预见的唯一问题是像“border: 1px solid black”之类的东西——实际上是将六个不同的 CSS 属性压缩为一个——作为参数传递给插件。我得考虑一下。

【解决方案6】：

你不能这样做。

内联样式总是优先于样式表中的样式。

使用!important 是让样式表样式优先于内联样式的正确方法。

【讨论】：

【解决方案7】：

一些插件这样做的方式是提供一个参数，开发人员可以使用该参数来覆盖默认类名。因此，如果他们想要覆盖您的样式，他们可以提供一个前缀参数来使所有类名成为 prefix.yourdefaultclassname。

【讨论】：

但这仍然不会覆盖内联样式，对吗？
我假设内联样式是由您的插件生成的。如果是这样，请坚持使用类，您仍然可以使用 !important，同时允许用户覆盖您的默认类。
您可以轻松地拥有一个显示“不要使用内联样式”的插件选项，然后如果它设置为 true，您只需添加类名而不是内联样式。