JavaScript中单个:not()多属性联合选择器与多个:not()单属性选择器的区别

先明确两种写法的逻辑差异：

1. 单个:not()内的联合属性选择器（如input:not([type="text"][type="password"])） #

这种写法的规则是：只有同时满足所有联合属性条件的元素，才会被排除。但一个<input>元素不可能同时拥有type="text"和type="password"这两个冲突的属性值，所以这个排除条件永远不会触发，最终会选中所有<input>元素——这就是你测试时选中两个元素的原因。

2. 串联两个独立的:not()（如input:not([type="text"]):not([type="password"])） #

这种写法的规则是：只要元素满足其中任意一个:not()里的条件，就会被排除。换句话说，它会先排除所有type="text"的<input>，再排除剩下元素里type="password"的<input>。如果你的两个<input>刚好分别是这两种类型，那最终就会没有符合条件的元素被选中。

简单总结：

• 单个:not()内的多条件是「且」的关系，必须同时满足才被排除
• 多个:not()串联是「或」的关系，满足任意一个就被排除

内容的提问来源于stack exchange，提问作者Super Kai - Kazuya Ito