：not（）僞類能夠有多個參數嗎？

我試圖選擇除radio和checkbox以外的全部type s的input元素。

許多人代表，您能夠在:not多個參數，可是不管如何我嘗試都不能使用type 。

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

有任何想法嗎？

---

#1樓

我對此有些麻煩，而且「 X：not（）：not（）」方法對我不起做用。

我最終採起了這種策略：

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

它幾乎沒有那麼有趣，可是當：not（）好戰時，它對我有用。 這不是理想的，但很可靠。

---

#2樓

若是您在項目中使用SASS，則我已經構建了這個mixin以使其按照咱們都但願的方式工做：

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

它能夠以兩種方式使用：

選項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*/
}

---

#3樓

從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。

---

#4樓

若是安裝了「 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

---

#5樓

爲何：不僅是使用兩個:not ：

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

_{是的，這是故意的}