为什么这个选择器优先于更具体的选择器？

Question

根据我之前的想法，元素的特异性低于类，当然还有嵌套类。那么为什么这个<P>标记优先呢？它在物理上更接近文本，是的，但我认为更具体的选择器将.a .b覆盖它。

<div class="a">
  <div class="b">
    <p>asdf</p> <!-- this text is 15pt red -->
  </div>
</div>

p{
  color: red;
}
.a .b{
  color: blue;
  font-size: 15pt;
}

JSBIN

Answer 1

更具体的选择器与该元素完全不匹配。

p { color: red; }会覆盖默认的color: inherit。

Answer 2

更具体的选择器是：

.a .b p{color: blue; font-size: 15pt;}

这样它只会在“b”下面的“p”目标，而不是“p”（非常具体）。