cssスタイル積層規則
1496 ワード
1.各要素と属性に適用されるすべての宣言を見つける
ブラウザは、各ページをロードするときに使用します.これにより各CSSルールが調べられ、影響を受けたすべてのHTML要素が表示されます.
2.順序と重みでソート
ブラウザは5つのソースを順番にチェックし、一致するプロパティを設定します.一致するプロパティが次のソースで定義されている場合は、そのプロパティの値が更新されます.
5つのソース:1.ブラウザの既定のスタイルシート2.ブラウザのフォントサイズを設定して、デフォルトのスタイル3を変更します.linkが参照するcssファイル4.スタイルに記述するスタイルコード5.行内スタイル
重みを宣言します.次のように!importantは、宣言の重みを増やすために使用されます.これで他の出所は一切考慮しなくてもいいです.
p {color:green !important; font-size:12pt;}
順番に重みを決めます.2つのルールが要素の同じ属性に影響し、それらの特指度も同じである場合、位置が最も下(または後に宣言)のルールが勝つ.
3.特指度で並べ替える:特指度は一つの規則がどれだけ明確であるかを表す
p {font-size:12px;}
p.largetext {font-size:16px;}
2番目のルールは、ラベル名とクラス名があるため、特に指度が高く、2番目のルールが1番目のルールを上書きします.
計算特指:ICE式
1.セレクタにIDが1つあり、Iの位置に1を加える.
2.セレクタにはクラスがあり、Cの位置に1を加える.
3.セレクタには、Eの位置に1を付ける要素(ラベル)名があります.
4.三桁を得る.
では、いくつかの例で韶特指度を整理します.
P 0-0-1特指度=1
p.largetext 0-1-1特指度=11
p#largetext 1-0-1特指度=101
body p#largetext 1-0-2特指度=102
body p#largetext ul.mylist 1-1-3特指度=113 body p#largetext ul.mylist li 1-1-4
特指度=114
ここで、各セレクタは、前のセレクタよりも特指度が高い.
4.CSSセレクタはどれらがありますか?継承できる属性はどれですか?
1.idセレクタ(#myid)2.クラスセレクタ(.myclassname)3.ラベルセレクタ(div,h 1,p)4.隣接セレクタ(h 1+p)5.サブセレクタ(ul>li)6.子孫セレクタ(li a)7.ワイルドカードセレクタ(*)8.属性セレクタ(a[rel="external")9.擬似クラスセレクタ(a:hover,li:nth-child)
*継承可能なスタイル:font-size font-family color,UL LI DL DD DT;
*継承できないスタイル:border padding margin width height;