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、ノード、要素取得の紹介