CSS優先度と特指度

1233 ワード

1、ID選択子>クラス選択子>要素選択子、特指度の高い優先度
2、行スタイル>インラインスタイル>リンクスタイル
3、設定したスタイル>継承したスタイル
特指度の計算:
特定の指数は、式I−C−Eで計算することができ、ここで
IはID
CはClass
EはElement
CSSルールの場合、セレクタにidが1つある場合、Iの値は+1になります.選択子にclassが1つある場合、Cの値+1;セレクタにelementが1つある場合、Eの値は+1になります.
最後に,Iの値から比較を開始し,比較のルールは次のように疑似コードで示される.
if(a.I > b.I){
    a      
}
else if(a.I < b.I){
    b      
}
else{
    if(a.C > b.C){
        a      
    }
    else if(a.C < b.C){
        b      
    }
    else{
        if(a.E > b.E){
            a      
        }
        else if(a.E < b.E){
            b      
        }
        else{
            if(a    b   ){
                b      
            }
            else{
                a      
            }
        }
    }
}

例:

red

green


上記の例のようにgreenTextの設定は後ろにありますが、前のスタイルは上書きされておらず、最後の結果は両方のテキストが赤色になります
2つのスタイルの特指度を計算します.
1、#redText pというセレクタには1回のIDと1回のElementが出ているので、特指度は1-0-1
2、#greenTextこのセレクタには一度しかIDが出ていないので、特指度は1-0-0です
最初の優先度は高く、後者に上書きされません