一个CSS的".class"是否可以将其特异性设置为'!important'?

Question

一个CSS的".class"是否可以将其特异性设置为'!important'?

22

我在大量使用jQuery UI小部件，因为一个需要解决的疏忽问题，主题变得越来越困难。

考虑一下这个问题：

<div id="node" class="ui-widget">
    <div class="ui-widget-content">
    </div>
</div>

那么这段 jQuery 代码：

<script>
    $(function() {
        $('#node').hover(function (){
            $(this).toggleClass("ui-state-error");
        });
    });
</script>

我希望将 ui-state-error 这个类名的样式设置为嵌套的 div 元素中的 !important 样式。尽管这是伪代码，但我发现这种情况很常见，容器发生 CSS 切换而子元素却无法继承。

更糟糕的是：如果我想在 jQuery 中覆盖这个样式，比如说使用 "backgroundcolor=ui-state-error:background-color"，那么我并不能保证这不会引起样式混乱，因为我并不确定这个背景颜色是否是该元素中最重要的。

这里有一个案例的 jsfiddle 示例：http://jsfiddle.net/WCuYH/1/

- MacLovin

2

不，使整个HTML类!important的唯一方法是在CSS中的每个属性设置后添加!important声明。那么是什么疏忽导致了这种情况？ - Kevin Boucher

3

在尝试将 !important 应用于整个类之前，您应该先了解 CSS 优先级以及其工作原理。 - adeneo

2

值得注意的是，!important 应该非常谨慎地使用。通常只有像 Mozilla 这样的浏览器供应商才会使用它。 - mlissner

我很困惑，一个关于!important作用和其利弊的混合物如何开始提供答案解决这个问题 - @Kevin !important明显没有包含在特定性的“class”级别中，只包含在其中的样式（所以我认为这是一个疏忽的特性），因为特定性还没有完全成熟（例如没有否定，无法在现场公开应用的样式，没有特定性级联选择控件等等）。 - MacLovin

1

!important 与优先级毫无关系。 - BoltClock

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

首先，!important 只适用于CSS规则中的一个声明。它不适用于类。因此，“不行”，你不能使一个类成为 !important。

其次，!important 仅是 CSS 特异性（specificity）的一部分。您还可以使用其他方法使规则成为更具特定性的规则以具有优先权（例如在父链中引用 ID 而不仅仅是类）。编写 CSS 时，使用 !important 是我最后的选择 - 我更愿意使用其他特异性解决方案来解决重写。通常，如果您控制所有 CSS，则很容易避免使用 !important。如果您必须覆盖一些您无法控制的 CSS，则有时很方便。

如果您的 jQuery 代码将在对象上切换类，则必须设计您的 CSS 规则，以便添加/删除此类会导致正确的 CSS 声明具有优先权。要进一步帮助您解决这个问题，您需要向我们展示相关部分的 HTML 和 CSS，以便我们建议如何解决您的特异性问题。