text 20180320 idとclassの详细度

Posted 2021-05-03

idのスタイルは、すべてのclassのスタイルを覆します。
これはCSSの詳細度と呼ばれるもので、記述の順番には影響されず、セレクタのポイントにより優先順位が決まります。
詳細度では、idはclassより優先されます。
そのため、下記のコードでは#fooのスタイルが優先され、テキストはレッドになります。

#foo { color: red; } 
.bar { color: green; } 
 
<h1 id="foo" class="bar">this will be red not green</h1>