css - 適用表示: なし; 選択されていない要素へ

Question

私はいくつかの部門を持っています。それらの 1 つがありますclass="active"。の div を除いて、すべての 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

!importantcssで使用します。次のようなものです。

.active {
    display: block !important;
}

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