：not（）疑似クラスは複数の引数を持つことができますか？

私が選択しようとしているinputすべての要素typeを除い秒radioとcheckbox。

多くの人があなたがに複数の引数を置くことができることを示しました:not、しかし、typeとにかくそれを使うことはうまくいかないようです私はそれを試みます。

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

何か案は？

なぜ：2つだけではなく:not：

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

_{はい、意図的です}

プロジェクトでSASSを使用している場合、私はこのミックスインを作成して、私たち全員が望むように動作させるようにしました。

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

次の2つの方法で使用できます。

オプション1：無視されたアイテムをインラインでリストする

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

オプション2：無視されたアイテムを最初に変数にリストする

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

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

いずれかのオプションで出力されたCSS

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

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

CSSセレクター4から開始して、:notセレクターで複数の引数を使用することが可能になります（ここを参照）。

CSS3では、：notセレクターは引数として1つのセレクターのみを許可します。レベル4のセレクターでは、セレクターリストを引数として使用できます。

例：

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

残念ながら、ブラウザのサポートは限られています。現時点では、Safariでのみ機能します。

これで問題が発生し、「X：not（）：not（）」メソッドが機能しませんでした。

私はこの戦略にたどり着きました：

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

それほど楽しいものではありませんが、：not（）が好奇心旺盛であったときに私にとってはうまくいきました。理想的ではありませんが、しっかりしています。

"cssnext" Post CSSプラグインをインストールすると、今すぐ使用したい構文を安全に使用できます。

cssnextを使用すると、これが有効になります。

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

これに：

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

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