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

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 つの方法があります。どちらがより適していると思いますか?

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

<<:  XAML でボタンを円として再描画する方法

>>:  ウェブサイトのビジュアルデザインパスはユーザーの習慣に合わせる必要がある

推薦する

React サーバーサイドレンダリング原則の分析と実践

ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...

Linux環境変数の設定に関する完全なガイド

Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...

Windows10にmysql5.7.18をインストールするチュートリアル

このチュートリアルでは、MySQL 5.7.18のインストールと設定方法を参考までに紹介します。具体...

DockerコンテナでArthasを使用するための詳細な手順

Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...

Linux アカウントのパスワードを変更する詳細な例

個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...

HTML でフォーム コントロールを無効にする 2 つの方法: readonly と disabled

Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...

実用的な基本的な Linux sed コマンドのサンプルコード

Linux ストリーム エディターは、データ センターでスクリプトを実行するのに便利な方法です。これ...

HTMLはキャンバスを使用して箇条書きスクリーン機能を実装します

導入最近、大きな課題をこなす際に、弾幕プレイヤーを作る必要がありました。他の人のソースコードを借りて...

base target="" はリンクのターゲットオープンフレームを制御します

<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...

Element における複数データ読み込み最適化の実装

目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...

ログインインターフェースの使いやすさとセキュリティのバランスをとる方法

ウェブデザイナーでもUIデザイナーでも、ログインページや登録ページのデザインは必ず経験しなければなら...

docker --privileged=true パラメータの役割についての簡単な説明

バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...

非常に便利な CSS 開発ツール 8 つを紹介

CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...

Centos6.9 インストール Mysql5.7.18 ステップ記録

インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...

uniapp パッケージ化されたアプレット レーダー チャート コンポーネントの完全なコード

効果画像:実装コードは以下のとおりですビュー <canvas id="radar-c...