¿Puede la pseudoclase: not () tener múltiples argumentos?

Estoy tratando de seleccionar elementos de input de todos los type , excepto la radio y la checkbox .

Muchas personas han demostrado que puedes poner múltiples argumentos en :not , pero usar el type no parece funcionar de todos modos, lo bash.

 form input:not([type="radio"], [type="checkbox"]) { /* css here */ } 

¿Algunas ideas?

Por qué: no solo usa dos :not :

 input:not([type="radio"]):not([type="checkbox"]) 

Sí, es intencional

Si está utilizando SASS en su proyecto, he creado este mixin para que funcione de la manera que todos queremos:

 @mixin not($ignorList...) { //if only a single value given @if (length($ignorList) == 1){ //it is probably a list variable so set ignore list to the variable $ignorList: nth($ignorList,1); } //set up an empty $notOutput variable $notOutput: ''; //for each item in the list @each $not in $ignorList { //generate a :not([ignored_item]) segment for each item in the ignore list and put them back to back $notOutput: $notOutput + ':not(#{$not})'; } //output the full :not() rule including all ignored items &#{$notOutput} { @content; } } 

se puede usar de 2 maneras:

Opción 1: enumerar los elementos ignorados en línea

 input { /*non-ignored styling goes here*/ @include not('[type="radio"]','[type="checkbox"]'){ /*ignored styling goes here*/ } } 

Opción 2: enumerar primero los elementos ignorados en una variable

 $ignoredItems: '[type="radio"]', '[type="checkbox"]' ; input { /*non-ignored styling goes here*/ @include not($ignoredItems){ /*ignored styling goes here*/ } } 

CSS emitido para cualquier opción

 input { /*non-ignored styling goes here*/ } input:not([type="radio"]):not([type="checkbox"]) { /*ignored styling goes here*/ } 

A partir de CSS 4 usando múltiples argumentos en el selector :not hace posible ( ver aquí ).

En CSS3, el selector: not solo permite 1 selector como argumento. En los selectores de nivel 4, puede tomar una lista de selectores como argumento.

Ejemplo:

 /* In this example, all p elements will be red, except for the first child and the ones with the class special. */ p:not(:first-child, .special) { color: red; } 

Desafortunadamente, el soporte del navegador es limitado . Por ahora, solo funciona en Safari.

Estaba teniendo problemas con esto, y el método “X: not (): not ()” no me funcionaba.

Terminé recurriendo a esta estrategia:

 INPUT { /* styles */ } INPUT[type="radio"], INPUT[type="checkbox"] { /* styles that reset previous styles */ } 

No es tan divertido, pero funcionó para mí cuando: no () estaba siendo belicoso. No es ideal, pero es sólido.

Si instala el complemento “Publicar cssnext” Publicar CSS , entonces puede comenzar a usar la syntax que desea utilizar en este momento.

Usar cssnext cambiará esto:

 input:not([type="radio"], [type="checkbox"]) { /* css here */ } 

Dentro de esto:

 input:not([type="radio"]):not([type="checkbox"]) { /* css here */ } 

http://cssnext.io/features/#not-pseudo-class