CSS スタイルの優先順位はどれくらい複雑ですか?

昨晩、面接の質問を見ていたら、CSS スタイルの優先順位について特に明確に説明していない人が何人かいることに気づきました。また、この知識ポイントについては以前からまとめています。今日は、一緒に進歩できるように、私が知っていることを書き留めておくことにします...
CSS スタイルの優先順位は複雑な知識ポイントです。その複雑さは「フローティング」や「ボックスモデル」に匹敵するほどだと思います。私は長い間この記事について考えてきましたが、おそらくそれは「1 年、2 つのポジション、3 つの重要なこと、4 つの特別なこと」という韻文で要約できるでしょう。詳しい説明は以下の通りです。

1. 「運ぶ」
ここでの「载」はキャリア、つまりスタイルシートを指します。開発者にとって、関係することが多いのは「ロード」だけですが、他に 2 つあります。彼らは何ですか？詳細は以下の通りです。
1. ユーザー側スタイルシート: これはブラウザのデフォルトのスタイルシートです。このルールに従う場合にのみ、div の元の属性を「display:block」に、span を「display:inline」にすることができます。
2. ユーザースタイルシート: ブラウザーを使用するユーザーが定義するスタイルシート。理解できないかもしれませんが、実際には可能です。具体的な設定方法については、Firefoxを例に説明します。手順は次のとおりです。(1)メニューバーの「ヘルプ」->トラブルシューティング情報->アプリケーションの基本->フォルダーを開く->Chrome。(2)userContent.cssという名前のCSSファイルを作成し、編集して必要なスタイルを追加し、保存します。名前は userContent.css である必要があり、変更できないことに注意してください。そうでない場合は無効になります。（3）Firefoxを再起動します。 w3cfuns ホームページの「ホットディスカッション」を例に、そのスタイルを設定しました。結果は次のとおりです。

本来の効果は以下のとおりです。

上記の側面を通じて、Web サイトの表示方法を自動的に変更できます。
3. 作成者スタイルシート: これは私たちが最もよく知っているもので、開発者が作成したスタイルシートです。私たちがよく話すスタイルシートは、実は私たちに最も近いため、このレベルに留まります。

2. 位置
「位置」を2番目のポイントに置く理由は、以下の考慮によるものです。(1)「位置」は、スタイル宣言の位置とスタイルシートリンクの位置の2つのポイントを指します。(2)スタイル宣言の位置であるか、スタイルシートリンクの位置であるかは、開発者に固有のものであり、これは「負荷」の3番目のポイントであるため、まず「負荷」について説明する必要があります。

理由が明確になったので、「ポジション」の詳細に入りましょう。理由の最初のポイントと同様に、次の 2 つのポイントから始めます。
1. スタイル宣言の場所: 一般的に、スタイルを宣言する方法は 4 つあります。@import ともう 1 つ (あまり使用されないため、名前を忘れました) を除いて、現在一般的な方法は、インラインと外部の 2 つです。インラインの場合は style タグを使用し、外部の場合は link タグを使用します。この時点で、スタイルスタイルの干渉 (4 番目のポイントで説明) を除けば、スタイルの優先順位は後から宣言されたスタイルの原則に従います。つまり、スタイルシートで後から宣言されたスタイルは、前に宣言されたスタイルよりも優先順位が高くなります。たとえば、style.css ファイルの最初の行には次のスタイルが宣言されています。

コードをコピー

コードは次のとおりです。

色:#f00;

3 行目では次のスタイルを宣言します。

コードをコピー

コードは次のとおりです。

色:#000;

すると、p の最終的なフォント色は黒になります。

2. スタイルシートリンクの場所: 同じスタイルが 2 つのスタイルシートで宣言され、同じ HTML ページが同時にこれらの 2 つのスタイルシートを呼び出す場合があります。この場合、スタイルの優先順位は後から呼び出される原則に基づいて決定できますが、後から呼び出されるオブジェクトは異なります。たとえば、HTML ページでは、ヘッドコードは次のようになります。

コードをコピー

コードは次のとおりです。

<ヘッド>
<link href="firstStyle.css" rel="スタイルシート" type="text/css">
<link href="secondStyle.css" rel="スタイルシート" type="text/css">
</head>

このとき、firstStyle.css で次のようなスタイルを宣言すると、

コードをコピー

コードは次のとおりです。

色:#f00;

secondStyle.css では、次のスタイルが宣言されています。

コードをコピー

コードは次のとおりです。

色:#000;

すると、p の最終的なフォント色は黒になります。後でリンクされるスタイルシートによって異なります。

3. 「重要」
「重要」は重要な意味です。感嘆符が付いていると、最も重要な意味になります。したがって、一般的なスタイルの宣言は、西遊記の崑鵬のようなものです。結局、「絶望のため息をつく」ことしかできません。しかし、「ロード」という言葉から、もう一度考えてみましょう。ユーザースタイルシートで重要なスタイルが宣言され、作成者スタイルシートでも重要なスタイルが宣言されている場合、どちらが優先されるでしょうか。
したがって、2 番目のポイントの「位置」の説明には、一定の限界があるように思われます。「負荷」から始まり、「重要」と組み合わせると、優先度の比較は次の 5 つのポイントに拡張できます。
1. ユーザーが宣言したスタイル
2. !important のないユーザースタイル
3. !important なしの著者スタイル
4. !important著者スタイルを追加
5. !important を含むユーザースタイルは昇順に並べ替えられます。つまり、ポイント 5 のスタイルはポイント 4 のスタイルよりも高い、ということになります。開発者にとって、important を追加することは最高レベルであり、後続のスタイルでそれを置き換えることはできないと言うべきです。これが、スタイルで important の使用を可能な限り避けるべきである理由です。重要が宣言されると、スタイルレベルが最高レベルに達し、CSS のコアメカニズムであるカスケードが意味を失ってしまうためです。この点に注意する必要がある。

4. 「スペシャル」
「位置」の説明では、スタイルタグを飛ばして、すぐにポイント、つまり後ろから追いつくという原則に入り、pタグの例を示しました。実際、経験豊富なフロントエンド担当者にとって、私が示した例は「適切」ではありません。なぜなら、同じスタイルシートで 2 つの p 要素のスタイルを宣言し、後者を使用して前者を置き換えるほど退屈する人は多くないからです。実際のところ、私は単に原理を説明したかったのです。さて、「特別」の意味を説明するために別の例を挙げましょう。まず HTML コードの一部:

コードをコピー

コードは次のとおりです。

次のスタイルは、style.css という名前のスタイルシートに書き込まれます。

コードをコピー

コードは次のとおりです。

#firstDiv #secondDiv #pElem{色:赤;}
#firstDiv #secondDiv .pElem{color:yellow;}
#firstDiv .pElem{色:青;}
#firstDiv p{色:グレー;}

ご覧のとおり、p のフォント色は黒です。スタイルタグを削除すると、p のフォント色は赤になります。スタイルシートの最初の行を削除すると、p のフォント色は黄色になり、次に青と灰色になります。
CSS のこの機能は、「特異性」コントラストと呼ばれます。確立されたコントラスト方法のセットがあり、その位置は a、b、c、d の 4 つの文字で表すことができます。 a はスタイルタグ、b は ID セレクター、c はクラスセレクターと疑似クラス、d は要素セレクターと疑似要素を指します。
これらを比較する方法は次のとおりです。a が同じ場合は b を比較します。a と b が同じ場合は c を比較します。a、b、c が同じ場合は d を比較します。これらがすべて同じ場合はどうなるでしょうか。「逆転して勝つ」。

上記の例を使って説明しましょう。 p にスタイルが存在する、つまり a が存在するため、それが最も優先され、p のフォント色は黒になります。スタイルが削除されると、 a は存在しないため、 ID セレクターが考慮されます。最初の CSS 宣言には 3 つの ID があり、これは後続の ID よりも多いため、これが最終的なスタイルになります。

結論: もともと少し時間をかけて書きたかったのですが、こんなに時間がかかるとは思っていませんでした。ちょっと大げさです!この記事は優先度のほぼすべての側面をカバーしていると言えます。はっきりとわかるかどうかわかりません。この記事のコードの一部はテストされていません。経験と以前の実験に基づいて得られたものです。結果が間違っている可能性があります。何か見つかった場合は、指摘してください。しかし、一般的には、それはまだ比較的責任があり、「学生を誤解させる」ことはありません。これで終わりです...

<<: nginx が動的と静的の分離を実装する方法の例

>>: CSS3 変換遷移ジッター問題の解決