:not() 伪类可以有多个参数吗？

Question

我正在尝试选择除

input

和

type

之外的所有

radio

的

checkbox

元素。

很多人已经证明你可以在

:not

中放入多个参数，但是使用

type

似乎不起作用，无论如何我尝试了一下。

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

有什么想法吗？

Answer 1

为什么：不只使用两个

:not

：

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

_{是的，是故意的}

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

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

不幸的是，浏览器支持有些新。

Answer 4

我在这方面遇到了一些麻烦，并且“X:not():not()”方法对我不起作用。

我最终采用了这个策略：

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

这并不那么有趣，但当 :not() 好斗时它对我有用。它并不理想，但很坚固。

Answer 5

如果您安装“cssnext”Post CSS 插件，那么您就可以安全地开始使用您现在想要使用的语法。

使用 cssnext 将会变成这样：

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

进入此：

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

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

Answer 6

仅引用 Jquery 文档 (https://api.jquery.com/not-selector/):

:not() 内部接受所有选择器，例如： :not(div a) 和 ：不是（div，a）。

我一直在

:not()

中使用多个属性和选择器，如下所示：

$('input:not([multiple],[type="number"])')

，或

$('select:not([disabled] .form-select)')

如果有人发现这有用