HTML で複数のクラス属性を定義する場合の無効な解決策
|
HTML を記述する過程で、クラス属性に複数の値を定義することがよくありますが、定義した値が無効であることに気付くこともよくあります。 ！ ！ 以前、このような状況に遭遇したときは、単に書き直すか、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 内の class 属性の位置によって決定されるのではなく、CSS ファイルが読み込まれたときに決定されることがわかります。 |
<<: MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離
>>: Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明
推薦する
MySql データベースにおける単一テーブル クエリと複数テーブル結合クエリの効率の比較
この間、プロジェクトに取り組んでいるときに、データ間の接続が非常に複雑なモジュールに遭遇しました。テ...
MySQLクエリ最適化に必須の知識ポイントのまとめ
序文クエリの最適化は一夜にして達成できるものではありません。対応するツールの使い方を学び、他の人の経...
MySQL の遅いクエリを見つける方法
序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...
史上最もクリエイティブな404ページのデザインは、ウェブサイトのユーザーエクスペリエンスを効果的に向上させます
ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...
sbinディレクトリを生成せずにNginxをインストールするソリューション
エラーの説明: 1. Linux (CentOS 7 64) システムに Nginx (1.18.0...
Nginx の書き換え正規マッチング書き換え方法の例
Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...
JavaScript オブジェクトの組み込みオブジェクト、値型、参照型の説明
目次物体オブジェクト定義オブジェクトのメンバーを反復処理するJS組み込みオブジェクト数学オブジェクト...
MySQL データベースのインストールと Navicat for MySQL の使用に関するチュートリアル
MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...
最高の無料英語フォント33選を紹介
チャンクファイブフリータイプファミリーCuprum JAH I フリーフォントイェセヴァブークレフィ...
CSS3はさまざまな境界効果を実現します
半透明の境界線結果： 実装コード: <div> 半透明の境界線が見えますか? </...
Ubuntu 18.04にmysql5.7をインストールする
Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...
モバイルレイアウトにvw+remを使用する方法
まだ rem フレキシブルレイアウトを使用していますか?圧縮された js コードの大きなセクションを...
Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析
目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...
Vue カプセル化に基づくプルダウン更新およびプルアップ読み込みコンポーネント
VueとネイティブJavaScriptカプセル化に基づいて、プルダウンリフレッシュとプルアップロード...
MySQL の列から行への変換と年月グループ化の例
以下のように表示されます。 SELECT count(DISTINCT(a.rect_id)) zc...