方法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 つの方法があります。どちらがより適していると思いますか? 興味のある方は編集者にメッセージを残してご意見をお聞かせください。 |
>>: ウェブサイトのビジュアルデザインパスはユーザーの習慣に合わせる必要がある
ほとんどの人は、サーバーサイド レンダリング (SSR と呼んでいます) の概念について聞いたことが...
Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...
このチュートリアルでは、MySQL 5.7.18のインストールと設定方法を参考までに紹介します。具体...
Arthas はあなたのために何ができるでしょうか? Arthas 、開発者に深く愛されている Al...
個人アカウントのパスワードを変更する一般ユーザーが個人アカウントのパスワードを変更する場合は、他のコ...
Web ページを作成する過程では、フォームがよく使用されます。しかし、フォーム上のコントロールを変更...
Linux ストリーム エディターは、データ センターでスクリプトを実行するのに便利な方法です。これ...
導入最近、大きな課題をこなす際に、弾幕プレイヤーを作る必要がありました。他の人のソースコードを借りて...
<base target=_blank> は、基本リンクのターゲット フレームを新しいペ...
目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...
ウェブデザイナーでもUIデザイナーでも、ログインページや登録ページのデザインは必ず経験しなければなら...
バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...
CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...
インストール手順 rpm -ivh mysql-コミュニティ-共通-5.7.18-1.el7.x86...
効果画像:実装コードは以下のとおりですビュー <canvas id="radar-c...