CSS表示プロパティをデフォルト値にリセット

displayプロパティをデフォルト値でオーバーライドすることは可能ですか？たとえば、あるスタイルでそれをnoneに設定し、デフォルトで別のスタイルをオーバーライドしたい場合などです。

または、その要素のデフォルトが何であるかを調べて、それに設定する唯一の方法は何ですか？要素が通常ブロックか、インラインか、どちらかであるかどうかを知る必要はありません...

ブラウザのデフォルトスタイルは、そのユーザーエージェントスタイルシートで定義されています。ソースはここにあります。残念ながら、Cascading and Inheritanceレベル3仕様は、スタイルプロパティをブラウザのデフォルトにリセットする方法を提案していないようです。ただし、Cascading and Inheritanceレベル4でこのためのキーワードを再導入する計画があります。ワーキンググループはまだこのキーワードの名前を決めていません（リンクには現在とありますがrevert、最終的なものではありません）。ブラウザのサポートに関する情報revertは、caniuse.comにあります。

レベル3の仕様ではinitialキーワードが導入されていますが、プロパティを初期値に設定すると、ブラウザではなくCSSで定義されているデフォルト値にプロパティがリセットされます。の初期値はです。これはここで指定されます。キーワードは、その値ではなく、ブラウザのデフォルトを指します。仕様自体は、プロパティの下でこのメモを作成します：displayinlineinitialall

たとえば、作成者がall: initial要素で指定した場合、カスケードの作成者、ユーザー、またはユーザーエージェントレベルにルールが表示されないかのように、すべての継承がブロックされ、すべてのプロパティがリセットされます。

これは、外部ページのスタイルを継承したくない、ページに含まれる「ウィジェット」のルート要素に役立ちます。ただし、その要素に適用された「デフォルト」スタイル（たとえばdisplay: block、のようなブロック要素のUAスタイルシートなど<div>）も吹き飛ばされることに注意してください。

したがって、純粋なCSSを使用している現在の唯一の方法は、ブラウザのデフォルト値を調べて手動で設定することだと思います。

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

（上記の代替案div.foo:not(.bar) { display: inline-block; }はですが、オーバーライドではなく元のセレクターを変更する必要があります。）

JavaScriptの使用が許可されている場合は、displayプロパティを空の文字列に設定できます。これにより、その特定の要素のデフォルトが使用されます。

var element = document.querySelector('span.selector');

// Set display to empty string to use default for that element
element.style.display = '';

ここにjsbinへのリンクがあります。

あなたは（に戻すために、ディスプレイの異なる種類を心配する必要はありませんので、これはいいですblock、inline、inline-block、table-cell、など）。

ただし、JavaScriptが必要なため、CSSのみのソリューションを探している場合、これはあなたにとってソリューションではありません。

注：これはインラインスタイルをオーバーライドしますが、CSSで設定されたスタイルはオーバーライドしません

設定解除display：

FirefoxとChromeのunset両方で機能する値を使用できます。

display: unset;

.foo     { display: none;  }
.foo.bar { display: unset; }

いいえ、それは一般的に不可能です。CSS（またはHTML）コードが要素のプロパティの値を設定すると、それを元に戻してブラウザにデフォルト値を使用するように指示する方法はありません。

もちろん、プロパティをデフォルト値として期待する値に設定することは可能です。HTML5 CRの[ レンダリング]セクションを確認すると、これはかなり広く機能する可能性があり、主にブラウザーが実際に行っていることを反映しています。

それでも、答えは「いいえ」です。ブラウザには、デフォルト値が何であってもよいからです。デフォルトにリセットしたい理由を分析する必要があります。オリジナルの問題はまだ解決可能かもしれません。

場合は、あなたがアクセスしていJavaScriptを、あなたは要素を作成し、その計算されたスタイルを読み取ることができます。

function defaultValueOfCssPropertyForElement(cssPropertyName, elementTagName, opt_pseudoElement) {
    var pseudoElement = opt_pseudoElement || null;
    var element = document.createElement(elementTagName);
    document.body.appendChild(element);
    var computedStyle = getComputedStyle(element, pseudoElement)[cssPropertyName];
    element.remove();
    return computedStyle;
}

// Usage:
defaultValueOfCssPropertyForElement('display', 'div'); // Output: 'block'
defaultValueOfCssPropertyForElement('content', 'div', ':after'); // Output: 'none'

BoltClockとJohnの回答については、IE11を使用するときに、個人的に最初のキーワードに問題がありました。Chromeでは問題なく動作しますが、IEでは効果がないようです。

：この回答によると、IEは最初のキーワードはサポートしていない 事業部の表示：初期はIE10とクロム29で意図したとおりに動作していないが

ここで提案されているように、代わりに空白に設定してみました： 表示後に通常に戻す方法：テーブル行のなし

これは機能し、私のシナリオには十分でした。もちろん、実際の初期値を設定するには、上記の答えが私が見つけた唯一の良い答えです。