idのスタイルは、すべてのclassのスタイルを覆します。
これはCSSの詳細度と呼ばれるもので、記述の順番には影響されず、セレクタのポイントにより優先順位が決まります。
詳細度では、idはclassより優先されます。
そのため、下記のコードでは#fooのスタイルが優先され、テキストはレッドになります。
#foo { color: red; }
.bar { color: green; }
<h1 id="foo" class="bar">this will be red not green</h1>