HTML で複数のクラス属性を定義する場合の無効な解決策

HTML を記述する過程で、クラス属性に複数の値を定義することがよくありますが、定義した値が無効であることに気付くこともよくあります。！！

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

コードをコピー

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

2 つのクラスに異なる色を設定しました。middle_div には赤、padding_10 には緑です。

結果は緑色を示し、私の最初の印象は「方向が間違っている！」でした。

そこで、2 つの位置を入れ替えましたが、それでも緑色のままでした。！

これ。。。。

そうでしょうか？ ? ?

CSS ファイルを開くと、padding_10 が middle_div の前にあることがわかりました。そこで、それらの位置を入れ替えました。

ブラウザを更新してください、赤！！！

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

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

<<: MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

>>: Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明