CSSの優先度を理解する2つの方法

方法1: 値を追加する

公式の説明を見るには MDN にアクセスしてください。

優先度はどのように計算されますか?

詳細度は、特定の CSS 宣言に割り当てられる重みであり、一致するセレクター内の各セレクター タイプの値によって決定されます。

優先度が複数の CSS 宣言のいずれかの優先度と等しい場合、CSS 内の最後の宣言が要素に適用されます。

優先順位は、同じ要素に対して複数の宣言がある場合にのみ重要になります。要素に直接作用するすべてのCSSルールは常に

over) 要素が祖先要素から継承するルール。

上記の説明から非常に重要なメッセージが得られます。重量

セレクターの優先順位の関係をもう一度見てみましょう: ID セレクター > クラス セレクター = 属性セレクター = 疑似クラス セレクター > タグ セレクター = 疑似要素セレクター。

真実が明らかになりそうだ。

異なるタイプのセレクターに重み値を設定し、セレクターの数に応じてそれらを合計するだけで、優先順位を簡単に取得できます。次に例を示します。

IDセレクタの重みは1000に設定されている

クラスセレクタ、属性セレクタ、疑似クラスセレクタの重みは100に設定されます。

タグセレクタと疑似要素セレクタの重み値は10に設定されます

次の CSS の重みをすぐに計算し、正しい判断を下すことができます。

//重み値 1110
#アプリ.メニュー.項目{}
//重み値 210
.menu.menu .item{}
//重み値 30
.item.item.item{}

しかし。 。 。注意深く見れば、低優先度セレクターが十分にある限り (例: .item...x200 {} )、低優先度の重み値が高優先度の重み値を超える可能性がありますが、実際の効果は依然として高優先度のスタイルに基づいています。このようなことが起こると、現在の重量計算方法では説明できない可能性があります。

もちろん、これはセレクターの最大数を制限し、セレクターの重み値を増やすことで説明できますが、これは実装するのに良い方法ではないと常に感じています。

方法2: ビットストレージ

重みの値は unsigned int 変数に格納されていると仮定すると、変数のビット位置は合計 32 ビット (4 バイト) になります。次のように、上位ビットからバイトごとに展開します。

バイト1: 00000000

バイト2: 00000000

バイト3: 00000000

バイト4: 00000000

バイトとセレクターに対応:

バイト1: 00000000

バイト2: 00000000; IDセレクタ

バイト 3: 00000000; クラス セレクタ、属性セレクタ、疑似クラス セレクタ

バイト 4: 00000000; タグ セレクタ、疑似要素セレクタ

同じタイプのセレクターの数が直接追加され、指定されたバイトに入力されます。

例1:

#app .menu .item{}

取得された重み値ビットは次のとおりです。

結果は65793です

例2:

.menu.menu .item{}

取得された重み値ビットは次のとおりです。

結果は513です

例3:

.item.item.item{}

取得された重み値ビットは次のとおりです。

結果は3です

上記の例では、平均記憶容量は 8 ビットしかないため、セレクターの上限は 255 です。もちろん、ビット位置を増やしてセレクターの最大値を増やすこともできます。

要約する

CSS の優先度を理解するには 2 つの方法があります。どちらがより適していると思いますか?

興味のある方は編集者にメッセージを残してご意見をお聞かせください。