后写的规则一定覆盖前面吗？

<style>
  #notice { color: navy; }
  .panel .notice { color: teal; }
  .notice { color: crimson; }
</style>
<section class="panel">
  <p id="notice" class="notice">观察最终颜色</p>
</section>

提问：假定均为同来源、同层的普通声明，无动画和其他规则。文字是什么颜色？只移除 id 属性后又是什么颜色？解释比较顺序。