CSSスタイルウェイト優先度ルールの説明

本文の一部の内容は以下のとおりである.https://blog.csdn.net/yue_yue_moon/article/details/88828460

css優先度ルール

1.css選択規則の重み値が異なる場合、重み値が高い優先;
2.cssルールの重み値を選択すると同時に、後に定義したルールを優先する.
3.css属性の後に追加!importantの場合、無条件絶対優先;

重み付け等級区分は、一般的に4つの等級に分けられます。

第1レベル:style=""などのインラインスタイルを表し、重み値は1000です.
第2レベル:IDセレクタを表し、例えば#id="",重み値は100である.
第3レベル:calss|擬似クラス|属性セレクタを表す.class|:hover,:link,:target|[type],重み値10;
第4等級:代表ラベル|偽要素セレクタ、例えばp|::after、::before、::fist-inline、::selection、重み値1;
また、汎用セレクタ(*)、サブセレクタ(>)、隣接する同胞セレクタ(+)などのセレクタは4レベル以内ではないため、それらの重み値は0である.

ウェイト優先度(Weight Priority)

css属性には!important優先度が最も高い
>インラインスタイル(style=")
>IDセレクタ(#id)
>クラスセレクタ(.class)=擬似クラスセレクタ(:hover等)=属性セレクタ[type等]
>要素セレクタ(pなど)=擬似要素セレクタ(:after/:before/::selectionなど)
>汎用セレクタ(*)
>継承されたスタイル

    
Martin Fowler
    
Dijkstra


ul#related span{  //  ：1 + 100 + 1=102
    color:red;
}

#favorite.highlight{  //  ：100 + 10 = 110
    color:orange;
}

.highlight{  //  ：10
    color:black;
}