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 はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

JavaScript はスローモーションアニメーションのカプセル化と使用法を説明します

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

JavaScript はスローモーションアニメーションのカプセル化と使用法を説明します

MySQL の order by ステートメントの最適化方法の詳細な説明

HTML マーキー文字フラグメントのスクロール

MySQLデータベースの管理者パスワードを忘れた場合の解決策

UbuntuへのDocker CEのインストール

mysql の追加、削除、変更、クエリの基本ステートメント

mysql8.0.11データディレクトリ移行の実装

CentOS7仮想マシンがインターネットにアクセスできない問題を解決し、CentOS7仮想マシンが静的IPを使用してインターネットにアクセスするように設定します。

JavaScript配列についてさらに詳しく知るのに役立つ記事

HTML タグでの this の使用法の紹介

推薦する

Dockerを使用してSonarQubeをインストールする詳細なチュートリアル

mysql を解決: エラー 1045 (28000): ユーザー 'root'@'localhost' のアクセスが拒否されました (パスワードの使用: NO/YES)

CenOS6.7 mysql 8.0.22 のインストールと設定方法のグラフィックチュートリアル

MySQL MHA 操作ステータス監視の概要

Antd+vueは円形属性フォームの動的検証のアイデアを実現します

HTML 選択タグにリンクを追加する 3 つの方法

Windows サーバーポートを開きます (例としてポート 8080 を使用します)

MySQLのkillがスレッドをkillできない理由

Apache ab を使用して HTTP パフォーマンステストを実行する

MySQL の一般的な SQL ステートメントの概要

MySQLサーバーは--read-onlyオプションで実行されているため、このステートメントを実行できません

Alibaba Cloud Server Ubuntu 上の Workbench が MySQL に接続できない問題の解決策 (テスト済み)

JSにおける合同と不等式、等式と不等式の問題について

Dockerでデータディレクトリを移行する方法

今日は、珍しいけれど役に立つJSテクニックをいくつか紹介します