CSS, кажется, думает: не переопределяет ли вещи после него

Question

Итак, у меня есть CSS код:

form input:not([type="radio"]):not([type="file"]), form select, form textarea {
    width: calc(100% - 10px);
    /*other stuff removed for irrelevance*/
}

form input[type="tel"] {
    width: calc(100% - 22px - 50px);
}

, а в Chrome инструменты разработчика говорят, что ширина задается правильно, но отключается первый набор селекторов. width или изменение form input[type="tel"] на form input[type="tel"]:not([type="file"]) исправляет ширину.

Что может быть причиной этого безумия? Это ошибка или я что-то упускаю?

Answer 1

это сумма иерархии селекторов. один элемент выбора + 2 типа выбора более мощный, чем один элемент выбора + 1 тип выбора.