HTML での複数のクラス属性の定義は無効です

今回は HTML で定義された複数のクラス属性 についてご紹介します。 HTML で複数のクラス属性 を定義する際に無効となる の注意点とは何でしょうか? 以下は実際のケースですので、見てみましょう。

HTMLを書く過程でclass属性に複数の値を定義することがよくありますが、定義した値が無効であることがよくあります。 ！ ！

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

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

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

結果は、方向が逆になっていると感じました。 ！

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

これ。 。 。 。

そうですか？ ? ?

CSS ファイルを開いて、padding_10 が middle_div の前にあることを確認してから、それらの位置を交換し、

ブラウザを更新します (赤色)。 ！ ！

そのため、複数のクラス値を定義する場合は、必ずお気に入りのスタイルを最後に配置してください。
しかし、padding_10 の前に div を追加し (親要素が div であると仮定して)、それを div.padding_10 に変更すると、それがどこにあっても、p div は常に緑色であることがわかります。この例から、CSS スタイルの
優先度
は、後で HTML 内のクラス属性の位置によって決定されるのではなく、CSS ファイルが読み込まれるときに決定されることがわかります。
これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他の

関連記事に注目してください。

関連記事:

marquee 要素を使用してフォントや画像をスクロールする効果を実現する方法

HTML の TextArea の形式を保存する方法

以上がHTML での複数のクラス属性の定義は無効ですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。