CSS の優先順位の概要

CSS の順序と優先順位は、Web ページのスタイルを設定する上で難しい部分です。ある日、適用しようとした CSS スタイルが機能しないことに気づくかもしれません。 Web ページでコードが実行されていないようです。これは、CSS の順序または優先順位の競合が原因である可能性があります。この記事では、CSS の順序と優先順位が何であるか、またそれらが Web ページのスタイルにどのような影響を与えるかを説明します。

優先度

#ブラウザは、どの CSS プロパティ値が要素に関連するかを決定します。このルールは、CSS セレクターがさまざまなタイプのルールを構成する方法に基づいています。 Priority は、特定の CSS 宣言に重みを与える正確な名前です。各宣言の重みまたは「重要性」は、一致するセレクターと等しい複数のセレクター タイプによって決定されます。 (推奨読書:

CSS 優先度の計算方法? および css スタイルの優先順位 )

優先度のみ 該当のみ要素に複数の宣言がある場合、セレクターの固有の値に基づいてターゲット要素が優先されます。セレクター値の違いを測定するリストは次のとおりです。

タイプ セレクター: これは、h1、h1 などの疑似要素または

クラスになります。クラス セレクター: これらには、属性セレクターと、hover などの疑似クラスが含まれます。 ID セレクター: 任意のタイプの ID セレクター。

ユニバーサル セレクターは優先順位に影響を与えず、一部のセレクターには ( 、 - 、 > 、 ~ ) のような組み合わせセレクターが含まれます。インライン スタイル (太字など) は常に外部スタイル シートのスタイルをオーバーライドし、最高の優先順位でチェーンの先頭にあることを前に説明しました。

続行する前に知っておくべきルールがいくつかあります。インライン CSS では、HTML のスタイル属性がスタイルと CSS ファイルの何よりも重要なルールです。特定のセレクターは、あまり指定されていないセレクターよりも優先されます。ドキュメント内の後続のコードは、以前に設定された以前のロールを上書きします。 ＃＃＃＃＃＃＃＃＃知らせ：！ importantExceptions

これらすべての特異性ルールの例外は、呼び出し時です。重要な方法。これが呼び出されると、他のすべての宣言がオーバーライドされます。これは機能しますが、一般的には悪い習慣です。ワークシート内の自然なカスケードが壊れ、デバッグが困難になります。これを使用しないようにするためのベスト プラクティスは簡単です。まず、特異性ルールを調べて、別のスタイル要素の前の優先順位を確認する必要があります。どうしても使わなければいけないなら！重要なことは、単一のページにのみ適用するなど、賢明に使用してください。

カスケード可能性

カスケードを使用したほうが、使用するよりも優れた成果を上げることができます。重要な方法。 CSS やカスケード スタイル シートの基本的な側面に詳しくない人のために説明すると、カスケードとは、さまざまなプロパティの値を組み合わせる方法のアルゴリズムです。

カスケードは、要素または属性に適用されているすべての CSS 宣言を最初に検索することによって機能します。まずその起源 (宣言された場所) から始まり、次に宣言の重要性について説明します。次に特異度を計算します。 HTML ファイルに埋め込まれた CSS は、順序に関係なく、外部スタイル シートに従います。カスケードがどのようなステップを踏むかを認識することが重要です。

一般に、競合するスタイル要素間に競合がある場合は、特異性の問題を考慮する必要があります。要素がコーディングしなかった場合と同じように動作する場合、その要素は優先度の高いものからスタイルを継承しています。この問題が発生しないように、最小限の具体性でスタイルを開始してください。

以上がCSS の優先順位の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。