Селектор с разделителями-запятыми не работает для ввода формы: не (...)

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.

Причудка : если вы просто перечислите один селектор в списке, а не разделите запятыми, он будет работать правильно.

Вопрос : можно ли использовать запятые при использовании not () в CSS? Использование списков в селекторе, кажется, нарушает его.

Answer 1

Запятая представляет логическое ИЛИ в синтаксисе селектора. Таким образом, каждый элемент будет сопоставляться с каждой частью вашего селектора за раз, и если он удовлетворяет хотя бы одной из этих частей, применяется правило.

Итак, в вашем случае, вот что происходит:

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 }