我正在尝试选择除单选和复选框之外的所有类型的输入元素。
许多人已经证明，你可以放入多个参数：不是，但使用类型似乎不起作用，反正我尝试了。
form input:not([type="radio"], [type="checkbox"]) {
/* css 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;
}
不幸的是，浏览器支持有些新。
其他回答
从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;
}
不幸的是，浏览器支持有些新。
如果您在项目中使用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*/
}
我遇到了一些问题，“X:not（）：not（）”方法对我不起作用。
我最终采用了这种策略：
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
这几乎没有那么有趣，但当：not（）好斗时，它对我起了作用。这不是理想的，但它是坚实的。
如果您安装了“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-伪类
为什么：不只是使用两个：不：
input:not([type="radio"]):not([type="checkbox"])
是的，这是故意的
