CSSの継承とカスケードの詳細な説明

前のセクションでは、ドキュメント構造と CSS セレクターを使用して要素にさまざまなスタイルを適用する方法を紹介しました。今日は、CSS のカスケードと継承について説明します。

継承: 要素が属性値を子孫要素に渡すために使用するメカニズム。簡単に言えば、要素の特定の属性を継承を通じて子要素に渡すことができます。

例:

テスト継承これはspan

の内容ではありません、ここでは

p{color:red} p要素の属性がspanに引き継がれているため、p要素と判定要素の文字が赤色になっていることがわかります。ただし、一部の属性は継承を通じて渡すことができません
たとえば、border は継承を通じて取得できません。実際、継承は理解するのが簡単ですが、カスケードと合わせて理解する必要があります。

カスケード: 要素にどのスタイルを使用するかを決定するときは、継承と宣言の特殊性を合わせて考慮して、どの CSS スタイルを有効にするかを決定する必要があります。このプロセスはカスケードと呼ばれます。

特徴は上で述べたので、見てみましょう。

まず質問させてください。次の 2 つのルールのペアのうちどちらが勝ちますか?

h1{color:red}
body h1{color:blue}

h2{color :red}
h2.color{color:green}

上記の 2 つのルールのペアのうち、明らかに 1 つだけが勝つことができますが、どちらが勝つべきでしょうか?答えは各セレクターの特異性にあります。

セレクターの具体的な特異性は次のとおりです:
1. ルールで指定された ID 属性値ごとに、特異性は 0,1,0,0 ずつ増加します
2。ルールで指定された値 クラス選択は属性セレクターと疑似クラスに準拠し、ルール内の各要素と疑似要素の詳細度は 0,0,1,0
3 ずつ増加します。 ,0,0,1
4. 文字とワイルドカードの組み合わせは、具体性に何の影響も与えません。
5. インラインスタイルの特異性は 1,0,0,0 ずつ増加します
6. 継承されたプロパティには特異性がないため、ワイルドカードよりも低くなります。
7.!重要なものは常に勝ちます。 so上記の2つのルールセットの結果があります：

h1{color：red}

h2{color：red}0,0,0,1
h2.color{ color:green} 0,0,1,0

つまり、赤と緑が有効になります。
したがって、カスケード ルールは次のとおりです:
1. コード内のすべてのセレクターを見つけます。

2. ルールの重みソートと原点ソートを表示、マーク！重要なスタイルが優先され、プロデューサー、リーダー、ユーザー エージェントの 3 つの起源があります。

3. 要素宣言の具体性の順序。

4. 要素宣言の出現順を並べ替えます。

CSS の継承とカスケードの詳細な説明については、PHP 中国語 Web サイトに注目してください。