CSSでの「カスケード」の意味は何ですか？

CSSの「カスケード」という用語の正確な意味は何ですか？いろいろな意見がありますので、こちらでお願いします。例が役立ちます。

このコンテキストでの「カスケード」とは、特定のHTMLに複数のスタイルシート宣言を適用できるため、どの特定のスタイルシートルールをどのHTMLに適用するかを決定する既知の方法が必要であることを意味します。

使用されるルールは、より一般的な宣言から必要な特定のルールにカスケードすることによって選択されます。最も具体的な宣言が選択されます。

私がCSSを教えるとき、私はいつも生徒たちに「カスケードスタイルシート」は「ファイティングスタイルシート」のようなものを意味すると言います。

1つのルールはH3タグを赤に、別のルールは緑に指示します。ルールは互いに矛盾しています。誰が勝ちますか？スタイルシートデスマッチ！

OK、それは少し誇張かもしれませんが、カスケードや継承の概念よりも、コードやプログラミングを始めたばかりの人にとってははるかに受け入れやすいものです。

もちろん、スタイルシートが互いに争うことは問題ではないことを彼らに必ず伝えます。それが言語の設計方法です。

HåkonWiumLie（CSSの共同作成者）は、CSSに関する博士論文の「カスケード」を「複数のスタイルシートを組み合わせてそれらの間の競合を解決するプロセス」と定義していますhttps://www.wiumlie.no/2006/phd/

次の記事はあなたの質問に完全に答えます。

これは、特定の要素にプロパティが適用される順序です。

http://www.blooberry.com/indexdot/css/topics/cascade.htm

あなたはそれを外側から内側に考えなければなりません。それがbodyタグにあるというルールがある場合、それはすべての子タグを「カスケード」します。本体内のタグにルールを設定すると、そのルールが採用されます。したがって、埋め込みタグからのルールによって中断されない限り、ルールはすべてのコンテンツをカスケードします。

CSS処理は、ウォーターフォールに複数のカスケードが含まれているものとして扱うことができます。これらのカスケードを上から下に順番に示します:(低い方が高い方の同じプロパティをオーバーライドできます）。

1. ユーザーエージェント宣言
2. ユーザーの通常の宣言
3. 著者の通常の宣言
4. 著者の重要な宣言
5. ユーザーの重要な宣言

詳細については、 スペックで

カスケードは、複数の起源から正しい値を選択することです。ただし、並べ替えとは異なります。並べ替える必要があるのは、順序が正しくないものだけです。ただし、CSSでは、これらのオリジンの優先順位は固定されています。したがって、擬似コードは次のようになります。

1. 値の配列を初期化します。
2. 最初の原点からの値を適用します。
3. 2番目の原点からの値を適用し、値が存在する場合はオーバーライドします。
4. ..。
5. N番目の原点からの値を適用し、値が存在する場合はオーバーライドします。

擬似コードから、いくつかのカスケードの滝のように見えることがわかります。

役立つかもしれない1つの説明。2つのスタイルシートを含め、それぞれに同じ特異性を持つルールがある場合、最後に含まれたものが優先されます。カスケードの最後のIEが最も影響力があります。

（これは、同じシートに2つのルールがある場合のバリエーションにすぎません。他のすべてが等しい場合、最後のルールが優先されます。）

例、与えられた

body {
    background:blue;
}

body {
    background:green;
}

その後、背景は緑になります。

この答えは全くの初心者向けです。この回答の概要が必要な場合は、私の2番目の回答をお読みください。

カスケードとは、特定の要素に複数のルールが適用される場合に、さまざまなスタイルシートを組み合わせて、さまざまなCSSルールと宣言の間の競合を解決するプロセスです。おそらくすでにご存知のように、フォントサイズなどの特定のスタイルプロパティの宣言は、複数のスタイルシートに表示されることも、1つのスタイルシート内に数回表示されることもあります。

カスケードを理解するには、CSS解析フェーズから開始する必要があります。これは、解析フェーズでは、最初のステップが競合するCSS宣言を解決し、2番目のステップが最終的なCSS値を処理するためです。

現在、CSSはさまざまなソースから取得することもできます。最も一般的なものは、開発者が作成するCSSです。スタイルシートに配置するこれらの宣言は、作成者宣言と呼ばれます。別のソースは、ユーザーからのCSSであるユーザー宣言です。たとえば、ユーザーがブラウザーでデフォルトのフォントサイズを変更すると、それがユーザーCSSになります。最後に、デフォルトのブラウザー宣言があります。

たとえば、リンクのアンカータグをHTMLに配置し、それをまったくスタイル設定しない場合、通常は青いテキストでレンダリングされ、右に下線が引かれます。これは、ブラウザによって設定されるため、ユーザーエージェントCSSと呼ばれます。したがって、カスケードはこれらすべての異なるソースからのCSS宣言を組み合わせますが、複数のルールが適用される場合、カスケードは実際に競合をどのように解決しますか？

さて、それが行うことは、重要性、セレクターの特異性、および競合する宣言のソース順序を調べて、どちらが優先されるかを決定することです。これがどのように機能するかを示します。まず、カスケードは、ソースで宣言されている場所に基づいて、重要度の異なる競合する宣言を与えることから始まります。最も重要な宣言は、importantキーワードでマークされたユーザー宣言です。

2番目に重要な宣言は、importantでマークされた作成者の宣言です。第三に、通常の作成者宣言、次に通常のユーザー宣言、そして最後に最も重要でない宣言はデフォルトのブラウザー宣言です。これは、ブラウザーからデフォルトで提供されるこれらの宣言を簡単に上書きできることを実際に理解しています。

これで、多くの場合、重要なキーワードを使用せずに、作成者のスタイルシートに多数の競合するルールが含まれることになります。これは実際に最も一般的なシナリオであり、この場合、すべての宣言はまったく同じ重要性を持っています。さて、この場合はどうなりますか？この場合、カスケードは宣言セレクターの特異性を計算して比較することであり、これがその仕組みです。

インラインスタイルの特異性が最も高く、次にID、次にクラス、疑似クラス、属性セレクター、最後に最も特異性の低い要素と疑似要素セレクターが続きます。したがって、前のスライドで見たのと同じ重要度の競合する宣言がある場合は、先ほど示した優先順位に基づいてセレクターの特異性を計算しますが、小さな例を使用して実際に特異性を計算する方法を見てみましょう。これが常に最善です。

上記の例から、これらの宣言はすべて作成者の宣言であるため、同じ重要性を持っています。それでは、背景色が青、緑、紫、黄色のいずれになるかを確認するために、セレクターの特異性を計算してみましょう。これが私たちのやり方です。特異性は、実際には1つの数字だけでなく、前に示した4つのカテゴリごとに1つの数字です。インラインスタイル、ID、クラス、疑似要素と属性、そして最後に要素と、これらのそれぞれについて、セレクターでの出現回数をカウントします。

したがって、ここセレクター1には、もちろんインラインスタイルはありません。これは、インラインスタイルをHTMLで記述する必要があるためですが、ここではそうではないため、ゼロになります。ここにもIDがないため、これもゼロですが、ボタンクラスという1つのクラスがあります。したがって、クラスカテゴリには1つあり、最後に、ここには要素セレクタがないので、そのカテゴリにもゼロがあります。それだけです。セレクターの特異性は、ゼロ、ゼロ、1、ゼロです。

それでは、他の製品と比較してみましょう。次のものもインラインスタイルではないので、最初のものはゼロです。これで、実際にはナビゲーションIDのIDセレクターがあります。これは、IDのセレクターです。また、右とボタンを引く2つのクラスがあるため、クラスカテゴリでは2つです。最後に、ここには2つの要素セレクターもあります。nav要素とdiv要素。これは、要素カテゴリでも2つであることを意味します。したがって、最終的にセレクターへの特異性は0、1、2、2であり、これは実際には非常に特異的なセレクターです。

セレクター番号3は非常に単純です。これは単なる要素セレクターであるため、特異度は0、0、0、1です。

最後の1つ、セレクター番号4です。まず、ナビゲーションIDがあるので、これはID用です。次に、クラス、ボタンクラス、およびホバーである疑似クラスがあります。これにより、クラスカテゴリ全体で2つになります。要素セレクターも1つあるため、最終的な特異性は0、1、2、1です。

次に、これらの数値を実際に使用して、どのセレクターが適用されるかを確認する方法を説明します。最も具体的なカテゴリであるインラインスタイルから始めて、左から右に数字を見ていきます。インラインスタイル用のセレクターがある場合、これが最も具体的なカテゴリであるため、他のすべてのセレクターに勝ちます。さて、ここではそうではないので、IDに移りましょう。セレクター2と4はここに1つあり、他のセレクターはゼロであるため、ゼロのセレクターはIDを持つセレクター2と4よりも具体性が低いため、ゲームから除外されます。

両方のセレクターにIDカテゴリが1つあるので、次に進んでクラスを確認する必要があります。どちらもこのカテゴリでは2つありますが、要素カテゴリでは、セレクター2には2つあり、セレクター4には1つしかないため、ここで勝者がいます。セレクター番号2は、すべての中で最も具体的なセレクターであるため、ボタンの背景が緑色になります34。勝った宣言の値は、カスケードの結果であるため、カスケード値と呼ばれます。

したがって、宣言された値の束から始めます。この場合、青、緑、紫、黄色のいずれかが勝ち、カスケード値になります。この例では緑です。

ここで、セクター4にも2つの要素があり、セレクター2と4の両方がまったく同じ特異性を持っていると想像してください。それで、この場合に何が起こるか、そして私はあなたにそれがもうほとんど大丈夫であることを約束します。この時点でまだ同点がある場合は、コードに記述されている最後のCSS宣言が適用されます。したがって、すべてが等しい場合、すべての宣言セレクターが同じ特異性を持っている場合、それは選択された要素のスタイルを設定するために使用される最後の宣言にすぎません。

これは、スタイルシート仕様の競合を解決するために使用されるプロセスです。

これは主に、CSSの優先順位に従って行われる競合解決プロセスです。

CSSはCascadingStyleSheetの略です。その性質上、カスケードスタイルシートのさらに下のスタイルは、上の同等のスタイルをオーバーライドします（上のスタイルがより具体的でない限り）。したがって、スタイルシートの先頭に基本スタイルを設定して、デザインのすべてのバージョンに適用し、ドキュメント内のさらに先のメディアクエリで関連するセクションを上書きできます。

カスケードとは、段階的に注ぐか、段階的に追加することを意味します。スタイルシートには、html要素のスタイルを設定するためのコードが含まれています。そして、コードがスタイルシートに書かれる方法は、カスケード方式です。または、単純に、スタイルシートのhtmlページの各html要素のレイヤーの連続したコードがカスケードスタイルシートを作成します。

カスケードは、各スタイルルールに重みを割り当てるアルゴリズムです。複数のルールが適用される場合、重みが最も大きいルールが優先されます。

1つ以上のスタイルが同じ要素に適用されると、CSSはカスケードと呼ばれる一連のルールを実行します。これは、適用された2つのスタイルの特異性の強さを評価し、勝者、つまりより重みのあるスタイルルールが勝つことを決定します。同じ重みで、最後に適用されたルールが優先されます。

カスケードと特異性あなたが知る必要があること：

1. ！importantでマークされたCSS宣言が最も優先されます。

2. ただし、最後のリソースとして！importantのみを使用してください。正しい特異性を使用することをお勧めします-より保守しやすいコード！

3. インラインスタイルは、外部スタイルシートのスタイルよりも常に優先されます。

4. 1つのIDを含むセレクターは、1000のクラスを持つセレクターよりも具体的です。

5. 1つのクラスを含むセレクターは、1000の要素を持つセレクターよりも具体的です。

6. ユニバーサルセレクター*には特異性の値はありません（0,0,0）

7. セレクターの順序よりも特異性に依存します。

8. ただし、サードパーティのスタイルシートを使用する場合は順序に依存してください。常に作成者のスタイルシートを最後に配置してください。

HTML要素に適用するCSSスタイルを選択する際、スタイル間の競合を解決する一連のカスケードルールに従って、特異性が一般性をオーバーライドします。

1. CSSがない場合、HTMLはブラウザのデフォルトスタイルに従って表示されます。
2. CSSタグセレクター（HTMLタグと一致）は、ブラウザーのデフォルトをオーバーライドします。
3. CSSクラスセレクター（。付き）はタグ参照をオーバーライドします。
4. CSS IDセレクター（＃付き）はクラス参照をオーバーライドします。
5. HTMLタグにコード化されたインラインCSSは、ID、クラス、およびタグCSSをオーバーライドします。
6. ！important値をCSSスタイルに追加すると、他のすべてがオーバーライドされます。
7. CSSセレクターが同一の場合、ブラウザーはそれらのプロパティを組み合わせます。結果のCSSプロパティが競合する場合、ブラウザはコードで後でまたは最近表示されたプロパティ値を選択します。

タグ、クラス、IDのより具体的な組み合わせに一致するCSSセレクターが優先されます。次の例のうち、CSSでの表示順序に関係なく、最初の例が2番目の例よりも優先されます。

ol#identity li.firstname { color: red; }
#identity .firstname { color: blue; }

CSS doc    
p{font-size: 12pt;}
p{font-size: 14pt;}

<p>My Headline<p>

pは実際の要素に「近い」ため、14ptフォントでレンダリングされます（外部スタイルシートはファイルの上部から下部に読み込まれます）。リンクされたスタイルシートを使用し、外部CSSドキュメントにリンクした後にドキュメントの先頭にCSSを含めると、定義された要素にさらに近いため、「inhead」宣言が優先されます。これは、均等に重み付けされたセレクターにのみ当てはまります。特定のセレクターの重みの適切な説明については、http：//www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlを確認してください。

とはいえ、すべての実用的な目的のために、カスケードの一部として「継承」を検討することもできます。物事は要素を含むことから「カスケード」します。