下記のサンプルのように、同じスタイルを適用していると
どうなるのか。
答えを先に言うと「後から読み込まれるもの」がスタイル適用の
優先度が高くなります。
|
1 2 3 4 5 6 7 8 9 10 |
#container{ background-color: blue; } #container{ background-color: green; } #container{ background-color: yellow; } |
ということは、下記のサンプルコードでは背景は黄色になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>HTMLのメモ</title> <link rel="stylesheet" href="test.css"> </head> <body> <div id="container"> <p>本日のニュース</p> <div id="news"> <p>株式会社＊＊＊の新製品の発表・・・</p> <p>執筆者<address>ベスナ</address></p> </div> </div> </body> </html> |
HTMLファイル内にstyle=""を指定したらどうなるのか？
上記のサンプルコードに
<div id="container">を
<div id="container" style="background-color:#333333">と
書き換えたらどうなるのか、答えはこの書き換えたコードが優先されて
濃いグレーに背景が変わります。
これ以外にも細かい優先度があります。
詳細は「セレクタ 優先度」とググッてみてください。