•CSSには多くのセレクターがあります。複数のセレクターを同じ要素に適用するとどうなるでしょうか? コード <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <スタイル タイプ="text/css"> p{ 色:赤; フォントサイズ: 10px; } #包む{ 色: ディープピンク; フォントサイズ: 30px; } 。箱{ 色:黄色; フォントサイズ: 50px; } </スタイル> </head> <本文> <p class='box' id="wrap"> 私の色は何色だと思いますか?</p> </本文> </html> • 実行すれば結果が出る •要約: この効果は、ブラウザがウェイト値に基づいてどの CSS スタイルを使用するかを決定するために発生します。ウェイト値が高いほど、その優先順位が高くなり、その CSS スタイルが表示されます。id セレクタのウェイト値は 100 > クラスセレクタ 10 > タグセレクタ 1 であるため、最終結果は id セレクタによって設定されたスタイルになります。 • 例2のコード!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <スタイル タイプ="text/css"> *{ 色: シアン; } div { 色: 黄色; } </スタイル> </head> <本文> <div> <p class='box' id="wrap"> 私の色は何色だと思いますか?</p> </div> </本文> </html> • 実行結果 •要約: 継承された要素には重み値がないため、最終的な結果はユニバーサルセレクタによって設定されたスタイルになります。 • 例3のコード<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <スタイル タイプ="text/css"> p{ 色: 黄色; } *{ 色: シアン; } </スタイル> </head> <本文> <div> <p class='box' id="wrap"> 私の色は何色だと思いますか?</p> </div> </本文> </html> • 実行結果 • 要約: タグセレクタの重みは1ですが、それでもユニバーサルセレクタよりも大きいため、最終結果はタグセレクタによって設定されたスタイルになります。 • 例4のコード<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <スタイル タイプ="text/css"> div p{ 色: 黄色; } div>p{ 色: シアン; } p{ 色: 赤; } </スタイル> </head> <本文> <div> <p class='box' id="wrap"> 私の色は何色だと思いますか?</p> </div> </本文> </html> • 実行結果 • 例5コード<!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="utf-8"> <タイトル></タイトル> <スタイル タイプ="text/css"> div>p{ 色: シアン; } div p{ 色: 黄色; } p{ 色: 赤; } </スタイル> </head> <本文> <div> <p class='box' id="wrap"> 私の色は何色だと思いますか?</p> </div> </本文> </html> • 実行結果 重量値の計算 <!--次のような構造があります: --> <div class='wrap1' id='box1'> <div class="wrap2" id="box2"> <p class='active'>MJJ</p> </div> </div> <!--重みの値を確認するためにいくつかの例を示します: --> p{color:gray;} <!--重みは1です--> div div p{color:yellow;} <!--重みは1+1+1=3です--> .active{color:red;} <!--重み 10--> div .active{color:black;} <!-- 重みは 11 です --> div div .active{color:blue;} <!--重みは12です--> .wrap #box2 .active{color:purple;} <!-- 重みは 120 です --> #box1 #box2 .active{color:green;} <!-- 重みは 210 です --> <!--ここから、実際には、重み値の計算では、まず最初に、重み値が繰り越されないことがわかります。使用されるセレクターについては、セレクターの数を数えるだけです (順番は、最初に ID、次にクラス、次に要素)。例: --> #box1 .wrap2 div{ color:red; } <!--重みは1 1 1です--> 注: 継承された属性にも重み値がありますが、その重み値は非常に低く、継承された重み値が最低であると理解できます。 !重要 ウェイト値を増やす例<!--Web ページのコードを作成するときに、特定のスタイルに最高のウェイト値を設定する必要がある特別なケースがいくつかあります。どうすればよいでしょうか。たとえば、インライン スタイルの重み値が 1000 で比較的大きいことがわかっている場合は、!important を使用して解決できます。 --> <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>!important の使用</title> <スタイル タイプ="text/css"> div{ 色:緑 !重要; } </スタイル> </head> <本文> <div id="box" style="color:red;"> <span>MJJ</span> </div> </本文> </html> • 実行結果 •要約: !important の使用は悪い習慣であり、できるだけ避けるべきです。スタイルシートの固有の重み比較ルールに重大な違反が生じ、バグのデバッグが困難になるためです。 !important を含む競合する 2 つのルールが同じタグに適用される場合、優先度が最も高いルールが使用されます。 !important はいつ使用できますか? • 最初 ◦ウェブサイトにはサイト全体のスタイルをデザインするCSSファイルがあります • 2番目
テキストの色を赤に変更するにはどうすればいいですか?この場合、!important が適用されないと、最初のルールが常に 2 番目のルールよりも優先されます。 要約: 要約する 上記は、エディターが紹介したCSSウェイト値(カスケード)の例の詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
>>: Javascript DOM、ノード、要素取得の紹介
タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...
Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...
目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...
目次変数意味があり発音しやすい変数名を使用する同じ型の変数には同じ語彙を使用する検索可能な名前を使用...
この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...
:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...
docker イメージ ID は一意であり、イメージを物理的に識別できます。repository: ...
Traceroute を使用すると、情報がコンピュータからインターネットの反対側のホストまでたどるパ...
目次1. ローカルストレージを構築する2. npmパッケージを作成し、プライベートリポジトリにアップ...
目次1. Props 親コンポーネント ---> 子コンポーネント通信2. $emit 子コン...
1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...
この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...
はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...
方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...
HTML の img タグで画像の中心を表示する方法は、現在 3 つあります。ここで記録しておきま...