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

CSSショートコース

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

p {色:赤; }
p {色:青; }

カスケードは、スタイルシートが赤と青の両方でなければならないと述べているにもかかわらず、段落をどの色にするかを決定します。 最終的に段落に適用できるのは1つの色だけなので、オーダーが必要です。

そして、この順序は、セレクタ(上記の例ではp)が優先順位が最も高く、ドキュメント内でどの順序で表示されるかによって適用されます。

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

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

上記の例では、これらのルールに基づいて、パラグラフは青で書かれています。なぜなら、p {color:blue; }スタイルシートの最後に来ます。

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