元素选择器如何用！important覆盖类选择器？

Question

我正在阅读unset property at MDN，然后陷入他们的代码示例（以下代码）中，而又不了解元素选择器为何在级联中更早时就用！important声明覆盖了类选择器。 / p>

ps：英语不是我的主要语言，请让我知道它听起来是否令人困惑。

p {
  color: red;
}

.foo {
  color: blue !important; 
}

.bar {
  color: green;
}

.bar p {
  color: unset;
}

<p>This text is red.</p>
<div class="foo">
  <p>This text is also red.</p>
</div>
<div class="bar">
  <p>This text is green (default inherited value).</p>
</div>