CSSコーディングの順番はどうなるのでしょうか？ CSSのコーディング順序を詳しく解説

この記事の内容は、CSSのコーディング順序とは何か？ CSSコーディングシーケンスの詳細な説明は、必要な友人が参考にできることを願っています。

CSS コーディング順序の調査 最後に定義された CSS スタイルは、次の例のように、その前に定義されたすべての既存のスタイルまたは競合するスタイルを上書きします。

サンプル コード

p { color: red; background: yellow }
p { color: green }

上記の段落は、最終的には黄色の背景を持つ緑色のフォントで表示されます。これは、最後に定義された色:緑色が以前に定義された赤色を上書きするためです。黄色と同様に、背景が消えないのは、競合がないためです。 p の 2 番目の定義にある定義なので、まだ有効です。

本当に理解していますか?さて、ちょっとしたテストをしてみましょう:

サンプル コード

p.red { color: red }
p.green { color: green }
p.blue { color: blue }

サンプル コード

<p class="red green blue">http://www.php.cn/</p>
<p class="green blue red">http://www.php.cn/</p>
<p class="blue red green">http://www.php.cn/</p>

すみません、最終的に表示されると、上の 3 つの段落のテキストは次のようになります。何色を表示しますか？

答えは、すべて青、つまり青で表示されているということですが、各段落で 3 つの p スタイルを適用する順序は異なりますが、その順序に従って色を決定する必要があるようです。たとえば、最初のスタイルは青で表示され、2 番目のスタイルは赤で表示され、3 番目のスタイルは緑で表示されます。これは、実際には、スタイルの順序とは関係ありません。これらはすべて最終的に最後に指定されたスタイルに従い、色は青になります。

上記は、CSS コーディングの順序は何ですか? CSS コーディング順序の詳細な説明を完全に紹介します。CSS3 チュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がCSSコーディングの順番はどうなるのでしょうか？ CSSのコーディング順序を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。