CSS優先度計算ルールの詳細説明-CSSチュートリアル-php.cn

CSS優先度計算ルールの詳細説明

小云云

リリース： 2017-12-19 09:38:09

オリジナル

2003 人が閲覧しました

最近、CSS の優先度の計算のルールを勉強しています。この記事では、CSS の優先度の計算のルールを中心に紹介します。共有して、みんなの参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

CSSの重み

1. CSSの導入方法

1. ノード要素で、style属性を使用します

2. styleタグを通してページに導入します

3 種類の導入方法の違い

index.html ファイル

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="body.css">
        <style type="text/css">
            body {
                background: red;
            }
        </style>
    </head>
    <body style="background: yellow;">
    </body>
    </html>

ログイン後にコピー

body.css ファイル

    body {
        background: green;
    }

ログイン後にコピー

1. 最初の方法は後の 2 つの方法よりも優先され、導入の順序は関係ありません。 link タグと style タグが head 内に配置されるか、body 内に配置されるか、html タグの最後に配置されるかに関係なく、ページには黄色が表示されます

2 2 番目と 3 番目のタイプは、水平方向の導入であり、導入されたスタイルです。後で、以前に導入したスタイルを上書きします。本文のスタイルタグを削除します。

リンクとスタイルタグの順序を調整します。リンクが前にあり、スタイルタグが後ろにある場合、ページは緑色で表示されます

2. ノード

1.id

2.class の取得方法。

3. ラベル

4. 属性

ID 値はページ内で一意である必要がありますが、複数の同一の ID が表示される場合、スタイルはすべての ID ノードに対して有効です。 # 続いてノード ID。 value

<body>
  <p id="id_p">第一个段落</p>
  <p id="id_p">第二个段落</p>
</body>

ログイン後にコピー

#id_p {
  color: red;
}

ログイン後にコピー

結果は、2 つの段落でテキストが赤色で表示されることを示しています

1. ID、クラス、ラベルがノード上で同時にスタイル設定される場合、ID の重みが高くなります。

2. ID がスタイルを設定する場合、リンクタグとスタイルタグを使用すると、以前のスタイルが上書きされます

クラス

クラスを使用すると、複数のノードのスタイルを同時に設定できます。、クラスを重ね合わせることができます。使い方は、ノードの単一クラス名が続きます

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p class-p-2">第二个段落</p>
</body>

ログイン後にコピー

.class-p {
  color: red;
}
.class-p-2 {
  color: green;
}

ログイン後にコピー

このとき、最初の段落は赤で表示され、2番目の段落は緑で表示されます

htmlを調整した後

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p-2 class-p">第二个段落</p><!-- 调换class-p 和 class-p-2 的顺序  -->
</body>

ログイン後にコピー

class-pとの位置を調整した後、 class-p-2、ページプレゼンテーション効果は変わりません。注: クラススタイルのレンダリングは、クラスの使用順序とは関係がありません。同じ重みを持つクラススタイルの設定の順序に関係しており、スタイル設定では、後のスタイル設定が前のスタイルを上書きします。設定

属性

ノードを介して属性を使用してスタイル設定するノードを取得することもできます

<body>
  <p>第一个段落</p>
  <p title="第二个段落的title">第二个段落</p>
</body>

ログイン後にコピー

[title] {
  color: red;
}

ログイン後にコピー

2番目の段落にはtitle属性があるため、2番目の段落には赤い

タグが表示されます

スタイル設定用のノードを取得します

タグ名

<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
</body>

ログイン後にコピー

p {
  color: red;
}

ログイン後にコピー

ページ内のすべての p ラベルノードが赤

混合

上記の 4 つの方法を混合して、対応するノードのスタイルを設定するために使用できます。組み合わせ方法には、階層ネスト、スタイルオーバーレイ、ノードの関連付けなどが含まれます。最終的には、最も重みが高いものが最終結果となります。

3. スタイルの重み

上記の 4 つのメソッドでは、個人の場合、ID が最も高く、クラスと属性は同じレベル (後続のスタイルが前のスタイルを上書きします)、ラベルが最も低くなります。

4 つの方法を組み合わせて使用する場合、重み付けされた結果が優先されます。同じノード上に存在する ID、クラス、属性、ラベルスタイルを並べ替えると、最初にランク付けされたものが最終的なレンダリング効果になります。例: ノード p には複数のタイプのスタイル設定があります。まず、ネストされたスタイルを含む、ID を持つすべてのスタイルを選択します。同じ ID の下で、別のタイプのスタイルを並べ替えます

<body class="body">
  <p id="id_p">第一个段落</p>
</body>

ログイン後にコピー

.body #id_p {
  color: red;
}

#id_p {
  color: green
}

ログイン後にコピー

両方のスタイル設定に ID があり、緑の効果は赤の後に設定されますが、並べ替えることで同じ #id_p を取得でき、前のものが存在します。body 、したがって、最終的なレンダリング効果は赤になります

クラス、属性、ラベルのスタイルがある場合、それらは同じタイプまたは重みのスタイルの順に並べ替えられます(クラスと属性は同じ重みを持ちます)。後のスタイルは前のスタイルを上書きします。 (名前に基づくものではなく、タイプに応じて)、1 位にランクされたものが最終結果となります。

注:

1. ネスト、オーバーレイ、>、+ などは最終的な効果には影響しません。

2. :nth-child、:first-child、:last-child およびその他の疑似クラスは、クラスおよび属性よりも上位です。最高、より高い id、class、attribute、label、style 属性

rreerree

ページのレンダリング効果は緑色です。ただし、スタイル設定が並べ替えられると、別のタイプの重みがより高いものが、同じタイプのスタイルの最終効果になります。たとえば、

<body class="body" style="background: red"></body>

ログイン後にコピー

同じクラスと ! important では、前者のスタイル設定には body タグがあり、後者にはがないため、最終的な効果は青で表示されます

説明

1 ! important の使用は避けてください。 !重要な重みが最も高いため、ノードのこの属性が強制的に設定されるため、使用する場合は注意してください

2. 使用シナリオ

プラグインを導入するときは、プラグイン内のスタイルを強力にオーバーライドします。。プラグインを導入するときに、プラグインのスタイルコードを変更したくない場合は、! important を使用してプラグインのスタイル属性を強制的にオーバーライドすることができます

インラインスタイルを強制的にオーバーライドします。インラインスタイルを使用して自動的に生成または動的に導入された HTML 構造の場合、! important を使用してインラインスタイルを強制的にオーバーライドできます
1。
! important は多くの場合に使用することをお勧めしません。 stylelint には ! important の使用を禁止するルールがあります。ほとんどの場合、 !payment` と同様の効果を達成できる回避策があります

html テキストの一部

css .body .p .span } .span.span.span.span.span; */ color: green; }

インラインスタイルと ID を考慮せずに、独自のスタイルを繰り返しオーバーレイして複数回使用して、クラスの重みを増やし、スタイルをオーバーライドできます。

使用の前提条件:

1. インラインスタイルのスタイル属性なし

2. 重複するスタイルの数がネストの数を超えています

利点: DOM の階層関係を考慮する必要がなく、階層構造が軽減されます。ネスト

5. 概要

上記の説明に基づいて、重みの計算は基本的に次のルールに従います。

1. タイプごとに比較し、より高いタイプの重みを持つものが表示されます

2.タイプ、数量で比較すると、より重みの高いものが表示されます

3. 同じ数量を順番に比較すると、後者は

ネストの使用に関する提案を示します

重みを増やすことに加えて、スタイルネスティングの使用また、DOM の特定の構造的関係も反映しています。ただし、すべての場合にネストが必要なわけではありません。
関連する推奨事項:

CSS 優先度の詳細な分析を共有する
CSS 優先度の問題
CSS priority_html/css_WEB-ITnose の詳細な説明