特殊性はかなり苦しんでいます、それを整理する時間です~
最初にセレクターとコードについて話しましょう
最も権威のあるものは「Css Authoritative Guide」です
特殊性を4つのレベルに分けます。各レベルはセレクターのタイプを表し、各レベルの値は、そのレベルが表すセレクターの数とこのレベルの重みを乗算して、セレクター値の特殊な特性を取得します。
4 つのレベルは次のように定義されます:
l 最初のレベル: などのインライン スタイルを表し、重みは 1000 です。
l 第 2 レベル: 重み 100 の #content などの ID セレクターを表します。
l 第 3 レベル: 重み 10 の代表クラス、疑似クラス、属性セレクター (.content など)。
l 第 4 レベル: 重み 1 の型セレクターと疑似要素セレクター (div p など) を表します。
注: ユニバーサル セレクター (*)、サブセレクター (>)、および隣接兄弟セレクター (+) はこれら 4 つのレベルに含まれないため、それらの重みはすべて 0 です。
栗が来ました
<html>#content div#main-content h2{color:red; }/*=2*100+2*1=202*/#content #main-content>h2{color:blue }/*=2*100+1=201*/body #content div[id="main-content"] h2{color:green; }/*=1*100+1*10+3*1=113*/#main-content div.paragraph h2{color:orange; }/*=1*100+1*10+2*1=112*/#main-content [class="paragraph"] h2{color:yellow; }/*=1*100+1*10+1*1=111*/div#main-content div.paragraph h2.first{color:pink;}/*=1*100+2*10+3*1=123*/</html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
