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

в 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? Использование списков в селекторе, похоже, нарушает его.

7
css css-selectors css3 html

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 }
9