層状は何のためにあるのですか？
スタイルの競合を解決するためです
3 つの部分に分かれており、比較の順序は次のとおりです
- 優先度
- 特殊性（ウェイト？特定性？オンラインの説明は一様ではありません）
- ソースの順序
まずは優先度です。優先度で解決できるものは、後のものと比較する必要はありません
優先度の比較順序は次のとおりです
- 作者のスタイルシート！important
- デフォルトのスタイルシート！important
- 作者のスタイルシート
- デフォルトのスタイルシート
優先度の比較が終わったら、まだ競合がある場合は特殊性を比較する必要があります
ここでは、4 つの数字の比較が生成されます（？、？、？、？）
スタイルの競合がある場合、最初の値から比較を開始し、大きい方が優先されます。同じ場合は次の桁を比較します
最初の数字は 0 または 1 のみで、インラインスタイルに書かれている場合は 1、書かれていない場合は 0 です。したがって、通常はインラインスタイルがない場合に 3 つの値を比較します（？、？、？）
2 番目はセレクタ内の ID の数です
3 番目はセレクタ内のクラスセレクタ、疑似クラスセレクタ、および属性セレクタの数です
最後のものはセレクタ内の要素セレクタの数です
特殊性がまだ比較できていない場合は、ソースの順序を比較する必要があります
つまり、ソースコード内で書かれた順序で、後に書かれたものが先に書かれたものを上書きします
OK、比較の順序は以上です。最後に、特殊性を迅速に比較する方法を紹介します。自分で半日かけて計算する必要はありません
VSCode を開き、CSS を書いた部分にマウスを置いてください