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

小开

最佳答案

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

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

_{是的，这是故意的}

小开

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

我最终采用了这个策略：

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

这并没有那么有趣，但当： not（）是好斗的时候，它对我有效。这不是理想的，但它是可靠的。

小开

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

@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 forthe first child and the ones with the class special. */
p:not(:first-child, .special) {color: red;}

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

小开

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