Почему классы CSS не соответствуют специфичности? ⇐ CSS

[Anonymous]

У меня есть следующий HTML & CSS: < /p>

Код: Выделить всё

< /code>
@import "tailwindcss";

.both-have, .foo.bar {
& .my-inner {
background-color: red;
}
}

.both-have {
& .my-inner {
background-color: aqua;
}
}

< /code>
Я не вижу, как фоновый цвет не установлен на Aqua, но при осмотре в браузере специфичность (0,2,1) для применяемого CSS. Тем не менее, класс .foo.bar 

ничего не соответствует здесь. Почему не сопоставление CSS все еще способствует специфике селектора? Это нормально? Но вот ссылка на игровую площадку с треском: https://play.tailwindcss.com/wzusi94ypg?file=css, попробуйте удалить. Смысл, я читаю https://www.w3.org/tr/selectors-4/#specificity-rules, и в нем указано следующее:

Если селектор является списком селектора, это число рассчитывается для каждого селектора в списке. Для заданного процесса сопоставления против списка, в рамках специфичности - это наиболее специфический селектор в списке , который совпадает . (Может быть, это отличается, когда в нем есть список селекторов?)

Подробнее здесь: https://stackoverflow.com/questions/796 ... pecificity