CSS の優先順位の詳細な分析を共有する

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

まずCSSについて簡単に説明します。 CSSとはCascading Style Sheetsの略です。

その仕様は、インターネットの歴史の中で独特の発展段階を表しています。現在、Web ページ制作に携わっている友人であれば、CSS について聞いたことがない人はほとんどいないはずです。CSS の優先順位について話す前に、CSS が何で、何に使用されるのかを理解する必要があります。

まずCSSについて簡単に説明します。 CSSとはCascading Style Sheetsの略です。その仕様は、インターネットの歴史の中で独特の発展段階を表しています。 Webページ制作の過程でCSSを使用することが多くなった現在、Webページ制作に携わっている友人はCSSのことを聞いたことがないはずです。

第 2 に、CSS を使用してドキュメントの外観をリッチで変更しやすいように設定できるため、Web ページ制作者の作業負担が軽減され、それによって制作とポストメンテナンスのコストが削減されます。

実際のところ、CSS とは何か、CSS がどのような役割を果たしているのかについて話すのは完全に蛇足ですが、Web ページ制作に携わっている友人なら多かれ少なかれ CSS に触れたことがあると思います。

本題に戻り、今日のトピックに入りましょう:

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

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

2. CSS の優先順位ルール

スタイルには優先順位があるため、この優先順位について合意するルールがあり、この「ルール」がこの記事の焦点です。

スタイルシートの特徴は、さまざまなルールの相対的な重みを記述します。その基本ルールは次のとおりです:

1. セレクター内の ID 属性の数をカウントします。

2. セレクター内の CLASS 属性の数をカウントします。

3. セレクター内の HTML タグ名の数を数えます。

最後に、3つの数字をスペースやカンマを入れずに正しい順序で書くと、3桁の数字が得られます(CSS2.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. 特性別セレクター一覧

以下は特性別セレクター一覧です。

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