体重の計算方法は？
計算ルール：重みは4つの値（A、B、C、D）によって決定されます。これら4つの値の意味は次のとおりです。
- インライン スタイルが発生する場合は A = 1 、それ以外の場合は A = 0
- B の値は、ID セレクターの出現数と同じです。
- C の値は、クラス セレクター、属性セレクター、および疑似クラスの出現数に等しくなります。
- D の値は、タグ セレクターと疑似要素が出現する回数に等しくなります。
上記のルールに従って、A、B、C、および D の値を見つけます。次に例を示します。
#nav-global > ul > li > a.nav-link:hover
- インラインスタイルがないため、A=0
- ID セレクターは 1 回表示されます ( B=1)
-
クラス セレクターは 1 回出現し、属性セレクターは 0 回出現し、擬似クラス セレクターは 1 回出現します。C =2
-
タグ セレクターは 3 回表示されます ( D=3)
見つかった値は (0、1、2、3) に簡略化できます。
重さを比較するにはどうすればよいですか?
計算された重み値（A、B、C、D）に従って左から右に比較し、大きい方が勝ちとなり、4 つが等しい場合は、後の方が優先されるという原則に従います。
例えば：
#nav-list .item { color: #f00; .nav-list .item { color : #0f0 }
#nav-list .item の優先度は (0, 1, 1, 0) です。
.nav-list .item の優先度は (0, 0, 2, 0) です。
A の値はすべて 0 で、B の値 1 は 0 より大きいため、 #nav-list .item は .nav-list .item より大きくなければならず、フォントの色は #f00 になります。
体重を増やすにはどうすればいいですか？
日常の開発では、既存のスタイルを上書きする問題がよく発生しますが、スタイルを追加した後、重みが十分に高くないため、正常に上書きできません。通常、いくつかの解決策を試します。
1. ページ DOM 構造に基づいて、同じ重みを持つセレクターを作成します。欠点: 保守が容易ではない DOM 構造が変更された場合は、オーバーライドされたスタイルを変更する必要があります。
例：
-
<div class="box1"> <div class="box2"> <div class="box3">文字</div> </div> </div> // 原有样式 .box1 .box2 .box3 {color: blue} // 覆盖样式（ps:这么写可以覆盖，但是DOM结构发生更改，CSS结构可能也需要更改） .box1 .box2 .box3 {color: red}
2. より深いレベルを使用します。欠点: 多くのコンポーネントのスタイルを変更できないことは言うまでもなく、重量を増やすために DOM 構造を増やすことは明らかに最適な解決策ではありません。
3. ID セレクターのオーバーライドを使用します。欠点: スタイルの重みが高くなりすぎるため、後でオーバーライドする場合は、! important のみを使用できます。
4. !重要を使用します。短所: これは最悪の方法で、スタイルの重みが非常に高くなり、次回どのように解決すればよいかわかりません。
では、どうすればより効果的に体重を増やすことができるのでしょうか？
.box3.box3.box3 { 色: 赤}
変更したい要素のクラス名を重ねると重みが増すだけでなく、構造が変わったかどうかや次回どう上書きするかを考える必要がなく、簡単にスタイルを上書きできますよ～