[CSS 注 4] CSS の継承、カスケード、および特殊性

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

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

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

p{border:1px Solid red;}

3 年生のとき、私は ネズミのように臆病 の小さな女の子でした​​。

上記の例では、コードの機能は、p タグの境界線を 1 ピクセル、赤、実線の境界線に設定することだけであり、サブ要素のスパンには影響しません。

2. 特殊性
同じ要素に異なる CSS スタイル コードを設定する場合があります。次のコードを見てみましょう:

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

小学 3 年生のとき、私は ネズミのように臆病 な女の子でした​​。

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 .notep{color:yellow;} /*权值为100+10+1=111*/

注: 継承にも非常に特殊な重みがありますが、これはわずか 0.1 であると示唆されているものもあります。体重が最も軽いです。

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

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

次のコードのように:

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

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

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

以下のコード:

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

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

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

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

上記は、CSS の継承、カスケード、および特殊性に関する [CSS Notes 4] の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。