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

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> 

Demo: http://jsbin.com/imibew/edit#javascript,html,live

Выпуск: все элементы ввода получают ширину 200px, где я просто хочу, чтобы ввод текста типа имел 200px.

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

Вопрос: Могу ли я использовать запятые при использовании: 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 }