Question

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

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

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

所以：我真正想要的是一种使内联样式自动采用 lower 优先级而不是外部类样式的方法，而不必创建外部类样式!important。 / p>

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

Answer 1

一般情况下，如果您正在考虑使用!important，那么您很可能会考虑整理样式表。

!important可以帮助强迫事情发挥作用，但大多数时候它都是过于复杂的CSS的指标。

没有!important的反面（甚至没有分配重要级别的能力），但如果存在，则可能适用相同的点。

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

我发现我实际需要!important的唯一一次是我一直在处理样式表的地方，该样式表分层在CMS模板定义的现有样式之上，我没有对...有任何控制权。

在您的情况下，您使用jQuery设置内联样式。如果你想获得斑点效果，这是一件非常好的事情。但是，为了执行一般样式，可以覆盖它，如果在CSS中定义了这些样式，并使用jQuery添加或删除类名以便应用这些样式，那么你会更好。

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

希望有所帮助。

Answer 2

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; }

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

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，它具有更高的特异性并将覆盖前者。

BTW：@Spudley对!important是正确的。

Answer 4

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

Answer 5

你做不到。

内联样式始终优先于样式表中的样式。

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

Answer 6

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

Answer 7

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

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

7 个答案: