不寻常的CSS特异性行为

Question

我已经使用CSS很多年了，我认为我很了解特异性，但这个例子让我感到困惑;这是深夜，所以我可能会遗漏一些明显的东西：

.class span {
  color: blue;
}

section#id {
  color: beige;
}

<div class="class">
  <section id="id">
    <span>Test</span>
  </section>
</div>

section#id的{​​{3}}为101，而.class span为11，最重要的是，第二条规则甚至在第一条规则之后指定。

我遗失了哪些明显的东西？

Answer 1

第一条规则缩小为span标记。第二个规则是父级部分的更高级别。所以，是的，.class span将优先，因为它击中了实际的标签。

Answer 2

您没有使用第二个选择器定位范围。颜色将仅级联到color属性设置为inherit的元素（默认）。