CSSカスケーディングメカニズムについての簡単な説明

CSSカスケーディングメカニズムについての簡単な説明

CSS にカスケード メカニズムがあるのはなぜですか?

CSS では、同じ要素の特定のプロパティに同時に影響を与えるスタイルが複数存在する可能性があるため、カスケード メカニズムによって、作成者 (コードを作成する人)、ユーザー (ページを閲覧する人)、およびユーザー エージェント (通常はブラウザー) 間のスタイルの競合を解決できます。

カスケード内の各スタイル ルールには重み値があります。これらのルールが複数同時に有効になっている場合は、重みが最も高いルールが優先されます。一般的に、作成者が指定したスタイルのウェイト値はユーザーのスタイルのウェイト値よりも高く、ユーザーのスタイルのウェイトはクライアント (ユーザー エージェント) のウェイト値よりも高くなります。一般的な重量値とオブジェクト、あるかどうか!重要なのは、特異性が位置に関係していることです。積み重ね順では、以下の重量値は小さいものから大きいものまでです

(1)ユーザーエージェントスタイル

(2)ユーザー一般スタイル

(3)著者の一般的なスタイル

(4)著者の重要なスタイル(!important)

(5)ユーザーの重要なスタイル(!important)

(6)2つのスタイルが同じコード(たとえば、両方とも作成者(コード)から来ている)から来ていて、それらのスタイル宣言が同等に重要である場合、それらは詳細度に基づいて計算され、詳細度の高いスタイルが低いスタイルを上書きします。

(7)具体性が同じであれば、スタイルが新しいほど優先順位が高くなります。

ユーザーが設定した重要なスタイルが、作成者が設定した重要なスタイルよりも優先されるのはなぜでしょうか。その理由は、ページのフォント サイズの調整など、ユーザーが特別な要件を満たしやすくするためです。

セレクタの特異性の計算

(1)要素のstyle属性に宣言が現れた場合、aは1としてカウントされる。

(2)bはセレクタ内の全てのIDセレクタの数の合計に等しい

(3)cはセレクタ内のすべてのクラスセレクタ、属性セレクタ、疑似クラスセレクタの合計に等しい。

(4)dはセレクタ内のすべてのタグセレクタと疑似要素セレクタの合計に等しい。

abcd はセレクターの詳細度です。比較順序は a から始まり、大きい方が優先されます。

知らせ:

  1. 継承は優先度が最も低く、詳細度も低い
  2. 結合子(+、>など)とユニバーサルセレクタ(*)の特異性は0です。
.box{} /*特異度=0,0,1,0*/
.box div{} /*特異度=0,0,1,1*/
#nav li{} /*特異度=0, 1, 0, 1*/
p:first-line{} /*特異度=0,0,0,2*/
style="" /*詳細度=1,0,0,0*/

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQL のスローログ監視の誤報問題の分析と解決

>>:  HTML フォームタグチュートリアル (3): 入力タグ

推薦する

グループフィールドを 1 行に書き込むための mysql group_concat メソッドの例

この記事では、MySQL group_concat を使用してグループ化されたフィールドを 1 つの...

docker compose デプロイメントにおけるマスタースレーブレプリケーションの実装

目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...

MySQL ジョイントインデックス(複合インデックス)の実装

共同インデックスこの記事におけるジョイントインデックスの定義は次のとおりです (MySQL): AL...

Hadoop 2.Xの新機能、ごみ箱機能の説明

ごみ箱機能をオンにすると、削除されたファイルの元のデータをタイムアウトなしで復元できるため、誤って削...

MySQLクエリツリー構造方式

目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...

ウォーターフォールフローレイアウト(無限読み込み)を実現する js

この記事の例では、ウォーターフォールフローレイアウトを実装するためのjsの具体的なコードを参考までに...

モバイルウェブ画面適応(rem)

序文最近、フロントエンドの学習に関する以前のメモを整理したところ、モバイル Web 画面の適応 (r...

Dockerを使用してDjango+MySQL8開発環境をデプロイする方法の詳細な説明

しばらく前にシステムを再インストールしましたが、バックアップを取っていなかったので、コンピューター上...

CocosCreatorでクールなレーダーチャートを描く方法

目次序文プレビュー文章グラフィックコンポーネントプロパティ機能グリッドを描く軸角度を計算するスケール...

MySQLトリガーの概念、原理、使用法の詳細な説明

この記事では、例を使用して、MySQL トリガーの概念、原則、および使用方法を説明します。ご参考まで...

SSM VUE Axios の詳細な説明

目次SQL ログを表示するにはどうすればいいですか? ? SpringMVC でのパラメータ渡しの説...

今日、今週、今月、先月のMySQLクエリデータ

今日 テーブル名から * を選択します。ここで、to_days(時間フィールド名) = to_day...

スタックメニューを実装するためのjQueryプラグイン

jQueryプラグインの毎日の積み重ねメニュー、参考までに、具体的な内容は次のとおりです。スタックメ...

純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード

レンダリング コード - 青と黄色のリングを例に挙げます <div class="コ...

MySQL エラー コード 1064 の解決策

SQL ステートメント内の単語が mysql のキーワードと競合する場合は、`` (タブ キーの上)...