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 个类型选择器更强大。