协慌网

我试图选择除radio和checkbox之外的所有type s 的input元素。

许多人表明，您可以在:not放置多个参数，但是无论如何尝试使用type似乎都行不通。

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

有任何想法吗？

为什么：不只是使用两个:not ：

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

_{是的，这是故意的}

如果您在项目中使用 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*/
}

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