可以：not（）伪类有多个参数？

我试图select除radio和checkbox以外的所有type的input元素。

许多人已经表明，你可以把多个参数:not ，但使用type似乎并不工作，无论如何，我尝试了。

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

有任何想法吗？

Answer 1

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

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

_{是的，这是故意的}

Answer 2

如果你在你的项目中使用SASS，我已经build立了这个混合，使其工作的方式，我们都希望：

 @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：首先在variables中列出被忽略的项目

 $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

我遇到了一些麻烦，并且“X：not（）：not（）”方法对我不起作用。

我最终采取了这个策略：

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

这几乎没有什么乐趣，但在以下情况下，它对我有用：not（）是好斗的。 这不是理想的，但它是坚实的。

Answer 4

从CSS 4开始，在:notselect器中使用多个参数成为可能（ 见这里 ）。

在CSS3中，notselect器只允许1个select器作为参数。 在4级select器中，它可以将select器列表作为参数。

例：

 /* 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。