今日は何位かな～(._.)？
”脱サラ”した
20歳の”学歴皆無”
こと
石原としきです( ..)φメモメモ
本日のタイトルは、
【CSSが競合するスタイルを解決する仕組み】
CSSでは1つの要素に複数の指定を
重ねて書くことは多々あります。
スタイル指定が競合する場合とは？？
CSSの特性として、ひとつの要素に対して
さまざまなセレクタを重ねて指定することが出来ます。
例えばタイプセレクタで
全li要素に文字サイズ設定をし、
クラスセレクタで特定のli要素にだけ
文字色も設定する感じです。
ただセレクタに優先順位があるので
それをうまくコントロール・把握できてないと
意図通りにならないことがある。
※CSSを書く順番やどこに書くかで決まってくる。※
セレクタで指定するプロパティが
重複していない場合、
スタイルは全て適用される。
もし同じプロパティが存在した場合は、
書かれている場所を見て
link要素 style要素 インライン指定
の優先順位で適用される。
つまりHTMLに直接スタイル指定を
書くと外部CSSファイルの指定が
無視されることがあります。
書いた場所が同じなら
セレクタの種類を見て
タイプ class・疑似要素 IDの順番で優先されます。。。。
CSSの特性上何度も同じ要素を
指定することがほとんどです。
競合しないように避けるのではなく
特性を理解したうえで上手に重ねていきましょう。。。
※種類ごとの優先順位※
子孫セレクタのように複数のセレクタ
を組み合わせる場合【個別性】
というチェックに点数を付けられる計算に
よって優先順が決まります。
セレクタに含まれるID名やクラス名、
要素名などを計方法でカウントし、
点数が大きいものほど優先順位が高くなります。
ではでは今日はこの辺で。。
応援クリックしてもらえたら本当に嬉しいです(:_;)