[解決済み] CSSの表示プロパティをデフォルト値に戻す

質問

displayプロパティをデフォルト値で上書きすることは可能でしょうか？例えば、あるスタイルでnoneに設定したものを、別のスタイルでそのデフォルト値で上書きしたい場合。

それとも、その要素のデフォルトが何であるかを調べて、それに設定するしかないのでしょうか？その要素が通常ブロックなのか、インラインなのか、どれなのかを知らなくてもいいようにしたいのですが...。

どのように解決するのですか？

ブラウザのデフォルトスタイルは、ユーザーエージェントのスタイルシートで定義されます。 ここで . 残念ながら カスケード接続と継承のレベル3仕様 は、スタイル プロパティをブラウザのデフォルトにリセットする方法を提案していないようです。しかし、このためのキーワードを カスケード接続と継承レベル4 - は、このキーワードの名前がまだ決まっていないだけです（リンク先では現在 revert しかし、それは最終的なものではありません）。のブラウザサポートに関する情報 revert は カニユーズドットコム .

レベル 3 仕様では initial キーワード を設定すると、そのプロパティを 初期値 デフォルト値にリセットする CSSで定義されているように , ブラウザの定義によらない . の初期値は display は inline これが指定されている場合 こちら . また initial キーワードは、ブラウザのデフォルト値ではなく、その値を参照します。仕様書では、このことを all プロパティ :

例えば、作者が all: initial は、カスケードの author、user、user-agent レベルに何もルールがないかのように、すべての継承をブロックし、すべてのプロパティをリセットします。

これは、外側のページのスタイルを継承したくない、ページに含まれる"widget"のルート要素のために有用であることができます。しかし、その要素に適用されるあらゆる "default"スタイル（例えば、次のような。 display: block のようなブロック要素に対して、UAスタイルシートからの <div> )も吹き飛んでしまいます。

ということは、純粋なCSSを使うには、ブラウザのデフォルト値を調べて、それに手動で設定するしかないのでしょうね。

div.foo { display: inline-block; }
div.foo.bar { display: block; }

(上記の代替案としては div.foo:not(.bar) { display: inline-block; } しかし、これはオーバーライドではなく、元のセレクタを修正する必要があります)。