HTML 5 CSSの継承、特殊性と積層
2883 ワード
継承
cssの一部のプロパティには、スタイルが特定のhtmlラベル要素だけでなく、子孫にも適用できるように継承された特徴があります.以下のコードのように、
ラベル文字が変色するだけでなく、ラベルも変色します.
p{color:red;}
<p> ，<span> ，span> 。p>ただし、次のような継承性を持たない属性もあります.
p{color:red;border:1px solid red;}
<p> ，<span> ，span> 。p>効果:
ラベルにも枠線を付けるには、個別に設定する必要があります.
<p> ，<span style="border:1px solid blue"> ，span> 。p>効果:
特殊性-重み付け
ウェイト値の存在は、同じラベルに対して異なるcssスタイルを設定するときにどのスタイルを使用するかを決定します.たとえば、次のようにします.
p{color:red;}
.first{color:green;}
<p class="first"> ， ， 。p>効果は緑色になります.これは、ウェイト値の存在ラベルのウェイト値が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*/継承されたウェイト値が最小で、1未満です.
せきそう
重み値についてお話ししましたが、重み値が同じ結果になったらどうなるかという問題があります.重み付けは、重み付け値が同じ場合に定義されたスタイルが、前に定義されたスタイルを上書きします.たとえば、次のようになります.
p{color:red;}
p{color:green;}
<p> ， 。p>フォントが緑になると、cssスタイルの優先度がわかります.インラインスタイルシート(ラベルの内部)>埋め込みスタイルシート(現在のファイル)>外部スタイルシート(外部ファイル)
注意:
場合によっては、前のスタイルを上書きしたくない場合は、最高の重み値を定義して使用できます.important:
p{color:red!important;}
p{color:green;}
<p> ， 。p>これでフォントが赤くなります