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 でボタンを円として再描画する方法

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

推薦する

プロフェッショナルなMySQL開発設計仕様とSQL記述仕様

チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...

Vueのカスタムディレクティブの詳細なガイド

目次1. カスタム指示とは何ですか? 2. 指示をカスタマイズする方法フック機能3. 応用シナリオ入...

jQueryアニメーションを理解するのに役立つ記事

目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...

MySQL 単一テーブルクエリの例の詳細な説明

1. データを準備するこのテーブルでは次の操作が実行されます 学生テーブルを作成 ( id int ...

JavaScript ECharts の使用方法の説明

以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...

MySQL 5.7.17 のインストールと使用方法のグラフィックチュートリアル

MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...

簡単な約束を段階的に実行する方法を教えます

目次ステップ1: フレームワークを構築するステップ2 構築されたPromiseフレームワークに入力す...

CSS 動的読み込みバー効果のサンプルコード

CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...

虫眼鏡ケースのJavaScriptオブジェクト指向実装

この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介しま...

HTMLでは、全体的なスタイルとレイアウトを崩さずに、部分的に強制スクロールバーを使用できます。

まずはエフェクト画像を投稿します:全体的なスタイルとレイアウトが崩れないように、スクロール バーがロ...

MySQLの日付文字列タイムスタンプ変換の詳細な説明

時刻、文字列、タイムスタンプ間の変換は、日常生活でよく使用されます。よく使用されますが、私は使用する...

JavaScriptでカレンダー効果を素早く実装

この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...

Ubuntu 20.04 は Wi-Fi に接続します (2 つの方法)

最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...

MySQLインデックスに関する重要な面接の質問をいくつか共有します

序文インデックスは、データベース内の 1 つ以上の列の値を並べ替え、データベースが効率的にデータを取...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...