Kann die Pseudoklasse :not() mehrere Argumente haben?

Question

Ich versuche zu wählen input Elemente von allen type s außer radio y checkbox .

Viele Leute haben gezeigt, dass man mehrere Argumente in :not sondern mit type scheint nicht zu funktionieren, egal wie ich es versuche.

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

Irgendwelche Ideen?

Answer 1

Warum :nicht einfach zwei verwenden :not :

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

_{<em>Ja, das ist beabsichtigt</em>}

Answer 2

Ab CSS Selectors 4 wird die Verwendung mehrerer Argumente in der :not Selektor möglich wird ( siehe hier ).

In CSS3 lässt der Selektor :not nur 1 Selektor als Argument zu. In Selektoren der Stufe 4 kann er eine Selektorliste als Argument verwenden.

Beispiel:

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

Leider ist die Browserunterstützung ziemlich neu .

Answer 3

Wenn Sie SASS in Ihrem Projekt verwenden, habe ich dieses Mixin erstellt, damit es so funktioniert, wie wir es alle wollen:

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

Es kann auf 2 Arten verwendet werden:

Option 1: Auflistung der ignorierten Elemente inline

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

Option 2: zuerst die ignorierten Elemente in einer Variablen auflisten

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

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

Ausgegebenes CSS für beide Optionen

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

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

Answer 4

Ich hatte einige Probleme damit, und die Methode "X:not():not()" hat bei mir nicht funktioniert.

Ich habe schließlich zu dieser Strategie gegriffen:

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

Es macht nicht annähernd so viel Spaß, aber für mich hat es funktioniert, als :not() kampflustig war. Es ist nicht ideal, aber es ist solide.

Answer 5

Wenn Sie Installieren Sie das Plugin "cssnext" für Post-CSS können Sie ohne Bedenken die Syntax verwenden, die Sie jetzt verwenden möchten.

Die Verwendung von cssnext wird dies ändern:

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

Hier hinein:

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

https://cssnext.github.io/features/#not-pseudo-class