ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS優先度計算ルールの詳細説明
CSS優先度計算ルールの詳細説明
- 小云云オリジナル
- 2017-12-19 09:38:092046ブラウズ
最近、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 ノードに対して有効です。 # 続いてノード 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 の詳細な説明
以上がCSS優先度計算ルールの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。