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

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

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

以下は、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 サイトをご覧ください。

関連おすすめ:

lessコンパイル時にCSS3のcalcが計算されてしまう問題の解決方法について

CSS3のアニメーション属性transform、transitionとアニメーション属性の違いを分析

以上がCSS における重み、カスケード、重要性 (!重要) の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。