カスケードスタイルシートのカスケードが意味することを学ぶ

カスケードは、CSSスタイルシートを非常に便利にするものです。つまり、カスケードは、競合するスタイルの適用方法の優先順位を定義します。言い換えれば、2つのスタイルがあるとします。

p {色：赤; }p {色：青; }

カスケードは、スタイルシートが赤と青の両方でなければならないと述べているにもかかわらず、段落をどの色にするかを決定します。最終的に段落に適用できるのは1つの色だけなので、オーダーが必要です。この順序は、セレクタ（ p 上記の例では最も高い優先順位を持ち、ドキュメント内でどのような順序で表示されているかを示します。

次のリストは、ブラウザがスタイルの優先順位をどのように決定するかを簡略化したものです。

1. 要素に一致するセレクタについては、スタイルシートを参照してください。定義されたスタイルがない場合は、ブラウザでデフォルトのルールを使用します
2. マークされたセレクタについては、スタイルシートを参照してください ！重要 適切な要素に適用します。
3. スタイルシートのすべてのスタイルはデフォルトのブラウザスタイルを上書きします（ユーザースタイルシートの場合を除く）。
4. スタイルセレクタが具体的であるほど、優先順位は高くなります。例えば、 div> p.class より具体的です p.class これは p.
5. 最後に、2つのルールが同じ要素に適用され、セレクタの優先順位が同じ場合、ロードされたルール 最終 適用されます。言い換えると、スタイルシートは上から下に読み込まれ、スタイルはお互いの上に適用されます。

これらのルールに基づいて、上の例では、段落は青で書かれています。 p {色：青; } スタイルシートの最後に来ます。

これはカスケードの非常に簡単な説明です。カスケードの仕組みについてもっと知りたい場合は、カスケーディング・スタイルシートの「カスケード」とは何を意味しているのでしょうか。