Необычное поведение специфичности 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 будет иметь приоритет, потому что он попадает в фактический тег.