ウェブページのCSSの優先順位について詳しく説明します

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があります。

まず、CSS について簡単に説明します。CSS は Cascading Style Sheets の略です。その仕様は、インターネットの歴史におけるユニークな開発段階を表しています。現在、Web ページ制作に携わっている方であれば、Web ページの作成過程で CSS を使用する必要があることが多いため、CSS について聞いたことがない人はほとんどいないはずです。

2 つ目: CSS を使用して、ドキュメントの外観をリッチかつ簡単に変更できるように設定し、Web ページ作成者の作業負荷を軽減することで、制作コストとその後のメンテナンス コストを削減できます。

実際のところ、CSS とは何か、その機能とは何かを今さら語るのは全く冗長です。Web ページ制作に携わっている友人なら、すでにある程度は CSS に触れていると思います。

さて、今日の話題に戻りましょう。

1. CSS の優先度とは何ですか?

いわゆる CSS 優先度は、ブラウザで CSS スタイルが解析される順序を指します。

2. CSSの優先順位ルール

スタイルには優先順位があるため、優先順位を決定するルールがあり、この「ルール」がこの記事の焦点となります。

スタイル シートの詳細度は、さまざまなルールの相対的な重みを表します。基本的なルールは次のとおりです。

1. セレクター内の ID 属性の数をカウントします。
2. セレクター内の CLASS 属性の数を数えます。
3. セレクター内の HTML タグ名の数をカウントします。

最後に、スペースやカンマを入れずに 3 つの数字を正しい順序で入力して、3 桁の数字を作成します (CSS 2.1 では 4 桁を使用します)。 (数字を 3 桁で終わる大きな数字に変換する必要があることに注意してください)。セレクターに対応する番号の最終的なリストにより、どの番号が大きい機能が低い番号の機能をオーバーライドするかを簡単に判断できます。

例えば：

1. 各 ID セレクター (#someid) に 0,1,0,0 を追加します。
2. 各クラスセレクター (.someclass)、各属性セレクター ([attr=value] など)、各疑似クラス (:hover など) に 0,0,1,0 を追加します。
3. 各要素または疑似要素 (:firstchild) に、0,0,0,1 を追加します。
4. その他のセレクターには、グローバル セレクター * と 0,0,0,0 が含まれます。追加しないことと同じですが、これも一種の特殊性であり、後で説明します。

3. 特徴分類のためのセレクタリスト

以下は、特性別に分類されたセレクターのリストです。

上の表だけ見ると、理解しにくいようです。別の表を以下に示します。

上記から、HTML タグの重みは 1、CLASS の重みは 10、ID の重みは 100、継承の重みは 0 (後述) であることが簡単にわかります。

これらの規則に従って、数値文字列を少しずつ追加して最終的な重みを取得し、比較を行うときに左から右に少しずつ比較します。

優先度の問題は、実際には競合解決の問題です。CSS セレクターによって同じ要素 (コンテンツ) が選択された場合、優先度に応じて異なる CSS ルールを選択する必要があります。実際には多くの問題が関係しています。

ここで、CSS の継承について説明しなければなりません。

複数の CSS スタイル ファイルが Web ページに読み込まれますが、そのうちの 1 つは Ext ライブラリに付属するスタイル ファイルであり、すべてのタグの一部のスタイルを定義しているため、元の Web ページが正しく表示されません。対応するスタイルを見つけることで、正しいスタイルがリセットされます。 body タグに新しいスタイルを追加しますが、2 つのスタイルが表示され、Ext スタイルは引き続き有効です。最後に、新しいスタイルを設定するときに * を追加しなかったため、body タグにのみ有効になり、サブタグには有効にならないことがわかりました。以下は修正されたスタイルです