css - 应用显示：无；到未选择的元素

Question

我有几个div。其中之一有class="active"。我希望所有 div 都被隐藏（display:none;），除了.active. 选择器应该是什么？

Answer 1

你有没有尝试过？

div { display: none; }

div.active { display: block; }

PS。我会添加解释。当您在选择器中指定一个类时，它在级联逻辑中具有更高的优先级（因为它具有更高的特异性）而不是单个 div（因为单个 div 更通用、更宽）。所以没有必要使用!important或类似的东西。

Answer 2

试试:not伪类。

例如：

div:not(.active) {display:none;}

正如 Paul 在下面评论的那样，IE8 及以下版本不支持此选择器。但是考虑到您包含CSS3标签并特别要求选择器，这可能不是问题。有关跨浏览器解决方案，请参阅@mkdotam 答案。

Answer 3

div:not(.active){
    display: none;
}

Answer 4

与 css 一起使用!important，类似这样：

.active {
    display: block !important;
}

例如：http: //jsfiddle.net/hNLen/