Рамка приоритета CSS

Question

Жертва CSS здесь

Почему следующий стиль:

.slider-menu .menu-app-container .non-menu .main-container * {
    box-sizing: border-box;
}

преобладает над этим:

.table > thead > tr > td > input, 
.table > tbody > tr > td > input, 
.table > tfoot > tr > td > input {
    box-sizing: inherit;
}

?

Answer 1

Потому что он имеет большую специфичность (0,0,4,0) = 40, чем другие (0,0,1,4) = 14

Также доступны онлайн калькуляторы специфичности, такие как этот, где вы можете проверить / узнать, как работает специфичность.