ホームページ > 記事 > ウェブフロントエンド > CSS における重み、カスケード、重要性 (!重要) の分析

CSS における重み、カスケード、重要性 (!重要) の分析

不言オリジナル: 2018-06-26 15:00:252403ブラウズ

以下は、CSS の重みとカスケード (!重要) の重要性についての簡単な説明です。内容がとても良かったので、参考としてシェアさせていただきます。

1. 特殊性の重み

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

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

p と。まず、どちらも 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 であることが示唆されているため、継承が最も低いことが理解できます。重さ。

2. カスケード

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

カスケード は、HTML ファイル内の同じ要素に複数の CSS スタイルが存在する可能性があり、同じ重みを持つスタイルが存在する場合、最後の CSS スタイルの順序に基づいて決定されます。応用となります。

次のコードのように:

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

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

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

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

3. 重要性

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

以下のコード:

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

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

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

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

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS における重み、カスケード、重要性 (!重要) の分析

関連記事