既存のアプリケーションをExt3.xから4に更新している最中ですが、ExtのスコープリセットCSSオプションを有効にして、Extがアプリケーション全体にCSSリセットを適用しないようにしましたが、別のアプリケーションに遭遇しています。問題。私のアプリケーションは、ハードコードされた、extで生成されていないHTMLおよびCSSスタイルを多数使用しており、その多くはExtコンポーネント（パネル、タブパネルなど）に含まれています。明らかに、このhtmlはextコンポーネントの要素を含む子孫であるため、 CSSリセットスタイル。その結果、Ext以外のhtmlのカスタムスタイルを完全に強化します。
具体的には、問題を引き起こしている2つのCSSルールがあります。
.x-border-box .x-reset, .x-border-box .x-reset * {box-sizing: border-box;-moz-box sizing: border-box;-ms-box-sizing: border-box;-webkit-box-sizing: border-box;}[/php]
このプロパティはそれほど問題ではありませんでした。ボックスのサイズを「content-box」に戻す独自のリセットラッパークラスを作成し、そのクラスをカスタムhtmlの最上位のラッパー要素に適用するだけでした。そのルールは次のとおりです。
.my-reset, .my-reset *, .x-reset .my-reset *, .x-border-box .x-reset .my-reset * { box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box;}
ただし、他のCSSルールは、否定するのがそれほど簡単ではないものです。
.x-reset html, .x-reset body, .x-reset div, .x-reset dl, .x-reset dt, .x-reset dd, .x-reset ul, .x-reset ol, .x-reset li, .x-reset h1, .x-reset h2, .x-reset h3, .x-reset h4, .x-reset h5, .x-reset h6, .x-reset pre, .x-reset code, .x-reset form, .x-reset fieldset, .x-reset legend, .x-reset input, .x-reset textarea, .x-reset p, .x-reset blockquote, .x-reset th, .x-reset td {margin: 0;padding: 0;}
このルールが非常に面倒な理由は、カスタムHTMLのすべての異なる要素が同じマージンとパディングを持たないため、ボックスサイズ設定の場合と同じようにこれらのスタイルをオーバーライドすることはできません。そして、このルールが私のカスタムCSSスタイルの大部分よりも優先される理由は、それ自体がCSSクラスよりも高い特異性を持っているためです。つまり、「。x-reset div」セレクターのマージン/パディングスタイルは、「。my-cool-class {padding：5px; margin：5px;}」for''のようなルールのスタイルをオーバーライドします。
これを克服するために、当然、カスタムcssを更新して、ターゲットとする要素のタイプ（ "div.my-cool-class"）をクラスセレクターの前に付けるか、ルールの前に.x-を付けることで、ルールの特異性を高めることができます。 reset（ ".x-reset .my-cool-class"）、ただし、これらのオプションのいずれかでは、ファイルサイズの追加やモジュール性の制限は言うまでもなく、既存の大量のカスタムcssを手動で更新する必要があります。 CSSクラス。
それで、Extの設定を介して、またはおそらく私が単に見落としている他のCSSソリューションを介して、この問題をエレガントにそしてうまくいけばあまりオーバーヘッドなしで解決できる方法はありますか？