css virgola selettori separati non funzionano per l'input forma: non (...)

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

Numero: tutti gli elementi di input ottengono una larghezza di 200 px, in cui voglio solo che l'input del testo sia di 200px.

Quirk: se basta elencare un selettore in, e non dispone di un elenco separato da virgole, funziona correttamente.

Domanda: posso utilizzare le virgole quando si utilizza: non() in CSS? L'utilizzo di elenchi nel selettore sembra interromperlo.

Answer 1

La virgola rappresenta una sintassi logica OR in selettore. Ogni elemento sarà quindi abbinato a ciascuna parte del tuo selettore alla volta e, se soddisfa almeno una di queste parti, la regola verrà applicata.

Quindi nel tuo caso, questo è ciò che accade:

1. Il input[type='button'] abbinerà il vostro selettore form input:not([type='submit'])

2. Il input[type='submit'] abbinerà il vostro selettore form input:not([type='button'])

3. Il input[type='text'] sarà (ovviamente) corrispondono a entrambi i selettori

Ecco perché la regola viene applicata a all input del modulo.

Se si desidera combinare entrambe le negazioni, li catena come così, invece di utilizzare un elenco separato da virgole:

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