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

クラス属性に複数の値を定義する場合、定義したスタイルが無効であることがよくあります。テスト後、複数のクラス値を定義する場合は、最後にお気に入りのスタイルを置くように注意する必要があります。そうしないと無効になります。 。 HTML を記述するプロセスでは、class 属性に複数の値を定義することがよくありますが、定義した値が無効であることが判明することもよくあります。 ！ ！

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

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

<p id="p" class="middle_p padding_10"> 
<span id="s" class="normal_span"></span> 
</p>

2 つのクラスで設定した色は異なります。 middle_p で設定した色は赤で、padding_10 で設定した色は緑です。結果は緑になります。私の第一印象は、方向が逆だ！

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

これ。 。 。 。

そうですか？ ? ?

CSS ファイルを開いて見てください。確かに、padding_10 が middle_p の前にあります。そして、ブラウザを

更新して、赤色になりました。 ！ ！

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

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

HTML で複数のクラス属性が定義されている場合の無効な解決策に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。