不寻常的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

您没有针对第二个选择器的跨度。该颜色只能级联到颜色属性设置为inherit（默认值）的元素。

Answer 2

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