CSSコーディング効率を向上させ、CSSコーディング順序を研究し、よりプロフェッショナルなものにします

downcodes.com の前回の記事で、「CSS ファイルを書き換えて、より整理され、明確に構造化する」と述べましたが、これは 1 つの方法ですが、私は常に CSS について推奨している良いコーディング習慣を身に付けています。今日の記事ではこの内容についてお話します。

最後に定義された CSS スタイルは、次の例のように、その前に定義された既存のスタイルまたは競合するスタイルをオーバーライドします。


上記の段落は、最終的には黄色の背景を持つ緑色のフォントで表示されます。これは、最後に定義された color:green が、以前に定義された赤色を上書きするためです。なぜなら、黄色の背景が消えないためです。定義内に矛盾する定義があるため、まだ有効です。
本当に理解していますか？ OK、ちょっとテストしてみましょう:



上の 3 つの段落のテキストが最終的に表示されるとき、何色になるかを教えてください。
答えは、すべて青、つまり青で表示されるということですが、各段落には 3 つの p スタイルが異なる順序で適用されていますが、たとえば、スタイルが適用される順序に従って色を決定する必要があるようです。 、1 番目は青、3 番目は赤、3 番目は緑と表示されます。これは順序とは関係ありません。スタイルはすべて最終的に最後に指定されたスタイルに従い、色は青になります。