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

我正在尝试选择以外input的所有types的元素radiocheckbox

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

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

有任何想法吗?

猿西门Tom2020/03/16 14:14:18

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

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

是的,这是故意的

乐小胖2020/03/16 14:14:18

我对此有些麻烦,并且“ X:not():not()”方法对我不起作用。

我最终采取了这种策略:

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

它几乎没有那么有趣,但是当:not()好战时,它对我有用。这不是理想的,但很可靠。

猴子Gil2020/03/16 14:14:18

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

小胖Stafan2020/03/16 14:14:18

如果安装了“ 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