こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、14年目エンジニアです。
この記事では、 cssの優先順位は先勝ちか後勝ちかについて調べて自分なりにまとめてみました。
ご参考になれば幸いです。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows11 |
|---|
結論：後勝ち
一番最初に結論を書きます。
cssは基本的に後から記載されたもの、つまり後勝ちです。
では、次から確認した内容をご紹介します。
確認したパターンその1：headに直接書いた場合
確認するために、↓のHTMLを用意しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style type="text/css"> .sample { color: red; } .sample { color: green; } </style> <meta charset="UTF-8"> <title>先勝ち後勝ちを確認</title> </head> <body> <h3>先勝ち後勝ちを確認</h3> <div class="sample">テスト</div> </body> </html> |
画面に表示させてみると、文字が緑で表示されているので後勝ちしていることが確認できました。
確認したパターンその2：外部cssを読み込んだ場合
確認するために、↓のHTMLと
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="./css/sample1.css" type="text/css"> <link rel="stylesheet" href="./css/sample2.css" type="text/css"> <meta charset="UTF-8"> <title>先勝ち後勝ちを確認</title> </head> <body> <h3>先勝ち後勝ちを確認</h3> <div class="sample">テスト</div> </body> </html> |
先に読み込ませるsample1.css
|
1 2 3 |
.sample { color: red; } |
後に読み込ませるsample2.cssを用意しました。
|
1 2 3 |
.sample { color: blue; } |
画面に表示させてみると、文字が青で表示されているので、外部で読み込ませた場合でも後勝ちしていることが確認できました。
まとめ：cssは基本的に後勝ち
以上がcssで先勝ちか後勝ちか、優先順位を調べてみた！でした！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント