css逗号分隔的选择器不适用于表单输入：not（...）

Question

CSS ：

form input:not([type='button']),form input:not([type='submit']) { width: 200px }

HTML ：

<form>
  <input type='button' value='button' />
  <input type='submit' value='submit' />
  <input type='text' value='text' />
</form>

演示：http://jsbin.com/imibew/edit#javascript,html,live

问题：所有输入元素的宽度都是200px，我只希望文本类型的输入为200px。

Quirk ：如果您只列出一个选择器，而不是逗号分隔列表，则它可以正常工作。

问题：使用时可以使用逗号：在CSS中使用not（）吗？在选择器中使用列表似乎打破了它。

Answer 1

逗号表示选择器语法中的逻辑OR。因此，每个元素将一次与选择器的每个部分匹配，如果它至少满足其中一个部分，则应用该规则。

所以在你的情况下，这就是：

1. input[type='button']将与您的form input:not([type='submit'])选择器

相匹配

2. input[type='submit']将与您的form input:not([type='button'])选择器

相匹配

3. input[type='text']（显然）匹配两个选择器

这就是为什么您的规则应用于所有表单输入的原因。

如果你想要结合两个否定，请将它们链接起来，而不是使用以逗号分隔的列表：

form input:not([type='button']):not([type='submit']) { width: 200px }