:not()不能兜底匹配未被覆盖的元素，仅作逻辑否定；需用通用规则+高优先级覆盖替代，如input,select,textarea{...}再覆盖特定类型。
怎么用 :not() 选中“没被其他规则覆盖”的表单元素
直接说结论：:not() 不能用来“兜底”或“默认匹配未被选中的元素”，它只做逻辑否定，不改变选择器优先级或匹配顺序。比如写 input:not([type="submit"]) 是合法的，但写 input:not(.handled) 并不能自动给所有没加 .handled 类的 input 加样式——前提是这些元素没被更高优先级规则覆盖。
:not() 的参数限制和常见错误
浏览器对 :not() 内部支持有限，尤其老版本（如 IE 不支持嵌套伪类）。你不能写：
-
input:not(:disabled, :read-only)—— 多参数在旧 CSS 中非法，应拆成两个规则或改用:not(:disabled):not(:read-only) -
input:not(.valid, .invalid)—— 同样非法，必须写成input:not(.valid):not(.invalid) -
input:not([data-status])—— 这是合法的，表示“没有data-status属性的input”，但注意它不会匹配data-status=""的元素（空值仍算存在）
真正想“兜底”时该怎么做
如果目标是：给所有没被显式处理的表单控件统一加基础样式（比如边框、字体），推荐组合策略而非依赖 :not()：
- 先写一个通用重置规则，比如
input, select, textarea { appearance: none; border: 1px solid #ccc; } - 再用高优先级规则覆盖特定类型：
input[type="submit"], input[type="button"] { background: #007bff; } - 避免用
:not()做兜底，因为一旦后续加了新 class 或属性，:not()规则可能意外失效且难调试 - 如需动态排除 JS 标记过的元素，可统一加
data-processed属性，再写input:not([data-processed])—— 但要确保 JS 确实设置了该属性
一个实用示例：只给非按钮类输入框加 focus 样式
下面这段 CSS 能正确生效，且兼容主流浏览器（Chrome 89+、Firefox 85+、Safari 15.4+）：
立即学习“前端免费学习笔记（深入）”；
input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,
select:focus,
textarea:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
注意这里用了连续多个 :not()，而不是试图用逗号分隔——后者会直接报解析错误。也别指望靠 :not(button) 匹配所有按钮，因为 不是 元素，类型必须按实际 HTML 属性写。
最常被忽略的一点：CSS 是从上到下解析的，:not() 规则如果写在通用规则后面，又没足够优先级，就会被前面更宽泛的样式盖掉。检查 computed styles 时，别只看是否匹配，重点看哪条规则最终生效。
