css - 为什么元素选择器会用 !important 覆盖类选择器？

Question

我在 MDN上阅读了关于unset 属性的内容，然后陷入了他们的代码示例（下面的代码）中，却没有理解元素选择器是如何在级联的早期使用 !important 声明覆盖类选择器的。

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>

标签： csscascadecss-specificity