HTML_HTML/Xhtml_Web ページ制作で複数のクラス属性が定義されている場合の無効な解決策

HTML を記述するプロセスでは、class 属性に複数の値を定義することがよくありますが、定義した値が無効であることが判明することもよくあります。 ！ ！

以前この状況に遭遇したときは、直接書き換えるか、ID を使用して css 属性を直接設定していましたが、今日考えてみると、何かが間違っているようです。 。 。真実を見つけなければなりません！ ！ ！

コードをコピーします

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

私は 2 つです。 各クラスに設定されている色は異なります。 middle_div に設定されている色は赤で、padding_10 に設定されている色は緑です。

の結果は緑です。方向が逆です！

そこで 2 つの位置を切り替えましたが、まだ緑色でした。 ！

これ。 。 。 。

もしかして？ ? ?

CSS ファイルを開いて見てください。確かに、padding_10 が middle_div の前にあります。

ブラウザを更新しました。 ！ ！

したがって、複数のクラス値を定義するときは、必ずお気に入りのスタイルを最後に配置してください。
しかし、padding_10 の前に div を追加すると (親要素が div であると仮定して)、それが div.padding_10 になると、それがどこにあっても、p div は常に緑色であることがわかります。

この例からわかるように、CSS スタイルの優先順位は、後で HTML 内のクラス属性の位置によって決定されるのではなく、CSS ファイルが読み込まれるときに決定されます。