方法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: 取得された重み値ビットは次のとおりです。 結果は65793です 例2: 取得された重み値ビットは次のとおりです。 結果は513です 例3: 取得された重み値ビットは次のとおりです。 結果は3です 上記の例では、平均記憶容量は 8 ビットしかないため、セレクターの上限は 255 です。もちろん、ビット位置を増やしてセレクターの最大値を増やすこともできます。 要約する CSS の優先度を理解するには 2 つの方法があります。どちらがより適していると思いますか? 興味のある方は編集者にメッセージを残してご意見をお聞かせください。 |
>>: ウェブサイトのビジュアルデザインパスはユーザーの習慣に合わせる必要がある
チーム開発のプロセスでは、プロジェクトの安定性、コードの効率性、管理の利便性のために、内部開発および...
目次1. カスタム指示とは何ですか? 2. 指示をカスタマイズする方法フック機能3. 応用シナリオ入...
目次1. 要素の表示と非表示を制御する show() hide() 2. 要素の透明度を制御する f...
1. データを準備するこのテーブルでは次の操作が実行されます 学生テーブルを作成 ( id int ...
以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...
MySQL は、スウェーデンの会社 MySQL AB によって開発され、現在は Oracle が所有...
目次ステップ1: フレームワークを構築するステップ2 構築されたPromiseフレームワークに入力す...
CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...
この記事では、参考までに、虫眼鏡のJavaScriptオブジェクト指向実装の具体的なコードを紹介しま...
まずはエフェクト画像を投稿します:全体的なスタイルとレイアウトが崩れないように、スクロール バーがロ...
時刻、文字列、タイムスタンプ間の変換は、日常生活でよく使用されます。よく使用されますが、私は使用する...
この記事では、カレンダー効果を素早く実現するためのJavaScriptの具体的なコードを例として紹介...
最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...
序文インデックスは、データベース内の 1 つ以上の列の値を並べ替え、データベースが効率的にデータを取...
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...