CSS スタイルの読み込みの優先順位に関する経験の共有

昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。

クラスは定義され、ページの初期読み込み時に認識されます。読み込みが完了した直後に、スタイルが書き換えられ、定義された margin-bottom が機能しなくなります。このスタイルがないと、コントロールが密集してしまいます。

テスト中、FF と Chrome はどちらも問題なく動作しますが、IE8 では問題が発生します。ただし、IE 開発者ツールを使用すると、margin-bottom が認識され、再定義されていないことがわかります。

問題はむしろ奇妙です。

このページは通常の構造ではありません。さまざまな要素がすでに書き込まれている通常のページではなく、ページコンテンツが非同期的に生成されます。ロード時にデータを再定義する理由については、まだ理由が見つかっていません。この現象は、混雑したフォーム要素のいずれかをクリックすると、その要素が配置されているモジュール内のすべてのフォームに margin-bottom スタイルが読み込まれ、混雑が解消されるというものです。または、IE 開発者ツールを使用して、最初に margin-bottom の前のボックスのチェックを外してから選択します。これにより、margin-bottom を認識しないページ上のすべてのフォーム要素でこのスタイルが正常に読み込まれるようになります。

しかし、これは決して問題の解決策ではありません。顧客にこの問題を見せてはいけません。UI はユーザーに最も印象を与えることができる部分ですが、ユーザーを最も苛立たせる可能性の高い部分でもあります。

次に、margin-bottom を他の定義に追加するのではなく、margin-bottom のスタイル定義を記述するなど、いくつかの方法を試しましたが、うまくいきませんでした。

優先度の高いメソッドである !important を追加しても機能しません。

直接記述するスタイルは !important よりも優先度が低く、コードの冗長性が多すぎてデメリットも増えるため、受け入れられません。

次に、スクリプトメソッドを試してみましたが、うまくいきました。コードは次のとおりです。

コードをコピー

コードは次のとおりです。

実はこれも単なる宣言です。内容はクラスと同じで、ブラウザも認識できます。 JS によって制御されるスタイルオブジェクト、 document.getElementByClassName("mar_b_10").style.margin-bottom="10px"; 一般に、DOM 操作は DOM ツリーが読み込まれた後に実行されることが多いため、JS によって制御されるスタイルの方が優先度が高くなります。 DOM ツリーが読み込まれた後、それを再定義する js を記述しました。スタイル定義の上書きは他にはなく、結果はかなり満足のいくものでした。

一般的に：

[重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順

!important > [インラインスタイル > ID セレクター > クラス、属性、疑似クラスセレクター > 要素タグ、疑似要素セレクター]

!important を使用すると、優先順位を最も高く、次にスタイルオブジェクト、次に id > class > タグの順に変更できます。また、宣言順で同じレベルのスタイルの後に表示されるスタイルは、優先順位が高くなります。

<<: 背景属性の8つの属性値の詳細解説（面接の質問）

>>: DockerコンテナでArthasを使用するための詳細な手順