CSS ウェイト値(カスケード)の例の詳細な説明

CSS ウェイト値(カスケード)の例の詳細な説明

•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番目

box p { color: blue; } p.awesome { color: red; }

テキストの色を赤に変更するにはどうすればいいですか?この場合、!important が適用されないと、最初のルールが常に 2 番目のルールよりも優先されます。

要約:

要約する

上記は、エディターが紹介したCSSウェイト値(カスケード)の例の詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  IE7 互換モードで IE8 を有効にするコード

>>:  Javascript DOM、ノード、要素取得の紹介

推薦する

MySQL における KEY、PRIMARY KEY、UNIQUE KEY、INDEX の違い

タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...

HTMLページ作成に関する私の経験の簡単な要約

Word of Mouth に入社して 3 ~ 4 か月が経ちました。仕事の中で一番の収穫は、ビジュ...

URL 書き換えモジュール 2.1 URL 書き換えモジュールのルール記述

目次前提条件テストページの設定書き換えルールの作成命名規則モードの定義アクションの定義設定ファイル内...

エレガントなJSコードの書き方

目次変数意味があり発音しやすい変数名を使用する同じ型の変数には同じ語彙を使用する検索可能な名前を使用...

Linux ファイル管理コマンド例の分析 [権限、作成、削除、コピー、移動、検索など]

この記事では、Linux ファイル管理コマンドについて例を挙げて説明します。ご参考までに、詳細は以下...

MySQL における := と = の違いをグラフィカルに紹介

:= と = の違い=設定および更新の場合にのみ、:= と同じ効果、つまり代入効果があり、それ以外の...

Dockerは元のタグのイメージの再タグ付けと削除を実装します

docker イメージ ID は一意であり、イメージを物理的に識別できます。repository: ...

Linux の traceroute コマンドの使用方法の詳細な説明

Traceroute を使用すると、情報がコンピュータからインターネットの反対側のホストまでたどるパ...

複数のパッケージソースから同時にパッケージをロードするようにnpmを設定する方法

目次1. ローカルストレージを構築する2. npmパッケージを作成し、プライベートリポジトリにアップ...

Vue がコンポーネント通信を実装する 8 つの例

目次1. Props 親コンポーネント ---> 子コンポーネント通信2. $emit 子コン...

VMware 仮想マシンに固定 IP アドレスを設定する方法 (グラフィック チュートリアル)

1. メニューバーで「編集」→「仮想ネットワーク エディター」を選択して仮想ネットワーク エディタ...

Vueプロジェクトがグラフィック検証コードを実装

この記事の例では、グラフィック検証コードを実装するためのVueプロジェクトの具体的なコードを参考まで...

優れた UI (ユーザー インターフェース) デザイナーになるための 20 の道標

はじめに: インターフェイス デザイナーの Joshua Porter が自身のブログでこの記事を公...

複数の HTML ページで HTML コードをまとめて呼び出す方法

方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...

HTMLのimgタグで画像の中心部分だけを表示する方法(3つの方法)

HTML の img タグで画像の中心を表示する方法は、現在 3 つあります。ここで記録しておきま...