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 }