Czy pseudo-klasa: not () może mieć wiele argumentów?

Próbuję wybrać inputelementy wszystkich typez wyjątkiem radioi checkbox.

Wiele osób pokazało, że możesz włożyć wiele argumentów :not, ale używanie typewydaje się nie działać, mimo to próbuję.

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

Jakieś pomysły?

Dlaczego: nie używaj tylko dwóch :not:

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

_{Tak, to celowe}

Jeśli używasz SASS w swoim projekcie, zbudowałem ten mixin, aby działał tak, jak wszyscy tego chcemy:

@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;
    }
}

można go używać na 2 sposoby:

Opcja 1: umieść w liście zignorowane elementy

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

Opcja 2: najpierw wypisz zignorowane elementy w zmiennej

$ignoredItems:
  '[type="radio"]',
  '[type="checkbox"]'
;

input {
  /*non-ignored styling goes here*/
  @include not($ignoredItems){
    /*ignored styling goes here*/
  }
}

Wygenerowano CSS dla każdej opcji

input {
    /*non-ignored styling goes here*/
}

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

Począwszy od selektorów CSS 4 przy użyciu wielu argumentów w :notselektorze staje się możliwe ( patrz tutaj ).

W CSS3 opcja: nie selektor dopuszcza tylko 1 selektor jako argument. W selektorach poziomu 4 może przyjmować listę selektorów jako argument.

Przykład:

/* 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;
}

Niestety obsługa przeglądarki jest ograniczona . Na razie działa tylko w Safari.

Miałem z tym pewne problemy, a metoda „X: not (): not ()” nie działała dla mnie.

Skończyło się na tym, że zastosowałem tę strategię:

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

To nie jest prawie tak zabawne, ale zadziałało dla mnie, gdy: not () był zadziorny. Nie jest idealny, ale jest solidny.

Jeśli zainstalujesz wtyczkę „cssnext” Post CSS , możesz bezpiecznie zacząć korzystać ze składni, której chcesz użyć teraz.

Użycie cssnext zmieni to:

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

Zaangażowany w to:

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

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