jquery - 当外部类 css 显示很重要时隐藏内部 div

Question

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

这就是他们所说的“级联”样式表吗？;)

我真的很惊讶我以前没有遇到过这种情况。有人可以解释这种冲突的机制以及我应该怎么做，因为我不想display:table !important在 css 类中搞砸。

现在我正在用 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。