當外部類css顯示是表重要時隱藏內部div

Question

給定一個外部div，其css類包含display:table !important ，其內部div仍然顯示你.hide()外部div與jQuery，或將外部div內聯樣式設置為display:none;

這是“層疊”樣式表的意思嗎？ ;）

我真的很驚訝我之前沒有碰到這個。 有人可以解釋這種沖突的機制以及我應該做什么，因為我不想搞砸display:table !important在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。