当外部类css显示是表重要时隐藏内部div

Question

给定一个外部div，其css类包含display:table !important，其内部div仍然显示当你使用jQuery .hide()外部div时，或者将外部div内联样式设置为display:none;

这是他们的意思吗？级联＆＃39;样式表？ ;）

我真的很惊讶我之前没遇到过这个问题。有人可以解释这种冲突的机制以及我应该做些什么，因为我不想在css类中弄乱display:table !important。

现在我正在和Mozilla一起看这个。

http://jsfiddle.net/YrEEk/1/

Answer 1

!important规则会覆盖其他样式规则（甚至是内联规则），这就是为什么你应该使用特异性来确定样式表中的优先级而不是投入!important。

现在覆盖!important规则的唯一方法是使用另一个!important规则，一个在级联中较低的规则或更具体的规则。

.hidden{
    display:none !important;
}

现在您可以将此类应用于元素：

$('#d1').addClass('hidden');

以下是演示：http://jsfiddle.net/YrEEk/4/

Answer 2

那是因为当你使用！important时，在没有！important之后设置其他任何内容将无法正常工作，因为它仍被最初的“display：table！important”覆盖

$('#d1').hide();

这一行只是将一个css属性“display：none”添加到不起作用的元素中，因为你仍然有“display：table！important”

如果需要，只需将CSS设置为“display：table”，不要使用！important。