CSSにおける継承、特殊性、カスケード、重要性について詳しく解説

1. 継承

CSS の一部のスタイルは継承されますが、継承とは何ですか?継承は、スタイルを特定の HTML タグ要素だけでなく、その子孫にも適用できるようにするルールです。たとえば、次のコード: 特定の色が p タグに適用される場合、この色の設定は p タグだけでなく、p タグ内のすべてのサブ要素テキストにも適用されます。ここで、サブ要素はスパンです。鬼ごっこ。

p{color:red;}   
<p>三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

その結果、p のテキストと spam のテキストは両方とも赤色に設定されます。ただし、一部の CSS スタイルは継承されないことに注意してください。たとえば、 border:1px Solid red;

p{border:1px solid red;}

上の例では、コードの機能は、p タグの境界線を 1 ピクセル、赤、実線の境界線に設定することだけですが、子要素のspanに影響します。

2. 特殊性

同じ要素に異なる CSS スタイル コードを設定することがあります。そのため、次のコードを見てみましょう:

p{color:red;}   
.first{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

pと .first は両方とも p タグに一致します。では、どちらの色が表示されるでしょうか?緑色が正しい色ですが、なぜでしょうか?これは、ブラウザが重みに基づいてどの CSS スタイルを使用するかを決定し、重みが大きいブラウザがどの CSS スタイルを使用するためです。

重みのルールは次のとおりです:

ラベルの重みは 1、クラス セレクターの重みは 10、ID セレクターの重みは最大 100 です。たとえば、次のコード:

p{color:red;} /*权值为1*/   
p span{color:green;} /*权值为1+1=2*/   
.warning{color:white;} /*权值为10*/   
p span.warning{color:purple;} /*权值为1+1+10=12*/   
#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注: 別の特別な重みがあります。継承にも重みがありますが、それは非常に低いものもあります。そのため、継承には 0.1 しかないことが示唆されています。最低の体重。

3. カスケード

質問について考えてみましょう: HTML ファイル内の同じ要素に複数の CSS スタイルがあり、それらの複数の CSS スタイルが同じ重み値を持つ場合はどうなるでしょうか?このセクションのカスケードは、この問題の解決に役立ちます。

カスケードとは、HTML ファイル内の同じ要素に対して複数の CSS スタイルが存在できることを意味します。同じ重みを持つスタイルが存在する場合、これらの CSS スタイルの順序に基づいて決定され、最後の CSS スタイルが適用されます。

次のコードのように:

p{color:red;}   
p{color:green;}

最後に、p のテキストが緑色に設定されます。このカスケードは、前のスタイルを上書きすることが分かりやすいです。

したがって、前の CSS スタイルの優先順位を理解するのは難しくありません:

インライン スタイル シート (タグ内) > 埋め込みスタイル シート (現在のファイル内) > 外部スタイル シート (外部ファイル内)。

4. 重要性

Web ページのコードを作成するとき、特定のスタイルに最高の重みを設定する必要がある特殊な状況がいくつかあります。現時点では、! important を使用してそれを解決できます。

次のコード:

p{color:red!important;}   
p{color:green;}   
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小男孩。</p>

このとき、p段落のテキストが赤色で表示されます。

注: !重要はセミコロンの前に書く必要があります

ここで、Web ページ作成者が CSS スタイルを設定しない場合、ブラウザは独自のスタイルのセットに従って Web ページを表示することに注意してください。また、ユーザーはブラウザで独自のカスタム スタイルを設定することもできます。たとえば、Web ページのテキストをより鮮明に表示できるように、フォント サイズを大きめに設定することに慣れているユーザーもいます。このとき、スタイルの優先順位は、ブラウザのデフォルト スタイル < Web ページ作成者のスタイル < ユーザーが設定したスタイルであることに注意してください。ただし、!重要な優先スタイルは例外であり、によって設定されたスタイルよりも重要度が高いことに注意してください。ユーザー。

上記の記事は、CSS における継承、特殊性、カスケードおよび重要性について簡単に説明しています。これは編集者が共有したすべての内容です。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS における継承、特殊性、カスケード、重要性の詳細な説明については、PHP 中国語 Web サイトに注目してください。