CSS の優先順位に関する理解によれば、最後に定義された CSS スタイルは、次の例のように、それより前に定義されたすべての既存のスタイルまたは競合するスタイルをオーバーライドします。
| 引用した内容は以下の通りです。 ソースコードの例: p { 色: 赤; 背景: 黄色 } |
上記の段落は、最終的には黄色の背景を持つ緑色のフォントで表示されます。これは、最後に定義された color:green が、以前に定義された赤色を上書きするためです。なぜなら、黄色の背景が消えないためです。定義内に矛盾する定義があるため、まだ有効です。
ランニング効果を見てみましょう:
| 引用した内容は以下の通りです。 実行するソースコード: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html" /><title>admin5</title>< style type="text/css">p { 色: 赤; 背景: 黄色 }p { 色: 緑 }</style></head><body><p>admin5</p></body></ html> <p class="red green blue">www.admin5.com</p> <p class="green blue red">管理者5</p> <p class="blue red green">www.admin5.com</p> |
もしかしたら、もう理解していると思っているかもしれません。本当に理解していますか？さて、ちょっとテストをしてみましょう。
| 引用した内容は以下の通りです。 ソースコードの例: .red { 色: 赤 } .green { 色: 緑 } .blue { 色: ブルー } ... <p class="red green blue">管理者5</p> <p class="green blue red">ウェブマスターの学習パラダイス</p> <p class="blue red green">www.admin5.com</p> |
上の 3 つの段落のテキストが最終的に表示されるとき、何色になるかを教えてください。
急いで次のコードを実行しないでください。何色になるか考えてください。
さて、それについてはすでに考えました。操作の効果を見てみましょう。
| 引用した内容は以下の通りです。 実行するソースコード: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html" /><title>www.admin5.com< /title><style type="text/css">.red { color: red }.green { color: green }.blue { color: blue }</style></head><body><p class=" red green blue">admin5</p><p class="green blue red">ウェブマスター ラーニング パラダイス</p><p class="blue red green">www.admin5.com</p></body > </html> |
答えは、すべて青、つまり青で表示されるということですが、各段落には3つの段落スタイルが異なる順序で適用されていますが、たとえば、スタイルが適用される順序に従って色を決定する必要があるようです。 、最初のものは青で表示され、2 つ目は赤で表示され、3 つ目は緑で表示されます。これは実際には順序とは関係ありません。スタイルはすべて最終的に最後に指定されたスタイルに従い、色は青です。上記の実験ですでに答えが得られているため、今後同様の問題に遭遇した場合でも心配しないでください。