css - 不寻常的 CSS 特异性行为

Question

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

.class span {
  color: blue;
}

section#id {
  color: beige;
}

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

Specificity section#id 是 101，而 .class span 是 11，除此之外，第二条规则甚至在第一条规则之后指定。

我错过了什么明显的东西？

Answer 1

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