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

【问题标题】：Can the :not() pseudo-class have multiple arguments?:not() 伪类可以有多个参数吗？
【发布时间】：2011-08-06 18:00:24
【问题描述】：

我正在尝试选择除 radio 和 checkbox 之外的所有 types 中的 input 元素。

很多人已经证明你可以在:not 中放置多个参数，但是我尝试使用type 似乎不起作用。

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

有什么想法吗？

【问题讨论】：

“许多人已经证明你可以在 :not 中添加多个参数” 要么这些人引用了一篇广为引用但严重误导的文章，要么他们在谈论 jQuery，而不是 CSS。请注意，给定的选择器实际上在 jQuery 中有效，但在 CSS 中无效。我写了一个问答，详细说明了差异：stackoverflow.com/questions/10711730/…（答案还提到了那篇文章）
恭喜！在正式版发布前 2 年，您已成功在上述示例中编写了有效的 CSS4.0。
@Jack Giffin：你指的是什么“官方版”？这个问题只比 selectors-4 的 FPWD 早了 5 个月，而且规范还远未完成：w3.org/TR/2011/WD-selectors4-20110929/#negation 它比第一次实现早 4 年半： stackoverflow.com/questions/35993727/…
根据 MDN，FF84 和 Safari9 目前支持具有多个参数的 :not() 选择器：developer.mozilla.org/en-US/docs/Web/CSS/:not#specifications

标签： css css-selectors

【解决方案1】：

如果您install the "cssnext" Post CSS plugin，那么您可以安全地开始使用您现在想使用的语法。

使用 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

【讨论】：

想点击链接并购买此处宣传的“插件”，但（不）幸运的是目标站点似乎不再可用。
感谢您告诉我链接已损坏。自从我发布我的答案后，CSS Next 已经更改了他们的 URL。我现在已经修复了链接。不过，您不必对此如此时髦。这是一个免费的开源 Post-CSS 插件。如果我发布一个指向 Lodash 或 Bootstrap 之类的链接，你会这么时髦吗？

【解决方案2】：

从 CSS 选择器 4 开始，在 :not 选择器中使用多个参数成为可能 (see here)。

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

不幸的是，浏览器支持是limited。目前，它仅适用于 Safari。

【讨论】：

根据caniuse.com，目前还是只有Safari支持
记住它的 CSS 选择器 Level 4，而不是 CSS 4，没有 CSS 4 这样的东西，它可能永远不会存在。
Firefox 84 也刚刚添加了对此的支持。
现在它适用于所有主流浏览器。截至 2021 年，这应该是公认的答案。
这有点疯狂，但它确实有效。但是：我必须写 .nav-link:not(first-child, .active):hover { ... } 并使用 first-child 而不是 :first-child 或 .nav-link:first-child 或其他东西。我不知道为什么（也许是因为我使用的是 Vue 并且 style 元素是 lang="scss"？），但这有效。我想让悬停样式适用于除第一个元素（因此 first-child）以及活动元素（.active）之外的所有内容。 2021

【解决方案3】：

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

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

_{是的，是故意的}

【讨论】：

这具有很高的特异性。
对于那些不懂幽默的人：他用: 字符说“为什么不...”。
附带说明，如果您执行input:not('.c1'), input:not('c2') 之类的操作，您最终会遇到两个类都必须在输入上才能匹配的“和”情况。
@BoltClock 延迟，但是，因此也需要:not([attr],[attr]) CSV 格式：-P
@Cloudkiller 不会选择任何输入元素->“不带 c1 类的输入或不带 c2 类的输入”

【解决方案4】：

如果您在项目中使用 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*/
}

【讨论】：

这不是让伐木工去五金店买木头吗？
什么？所以你宁愿写 .selector:not(.one):not(.two):not(.three):not(.four) { ... } 而不是 .selector { @include not('.one',' .two','.three','.four') { ... } } ?
在效率方面：yes. 少了' 字符和imo 更高效的代码。
:not() = 每项 6 个字符； '', = 每项 3 个字符。 @include 应该分配给一个热键，所以我将把它算作一个字符（就输入而言）。从技术上讲，如果您非常讨厌列表中的单引号，我认为您甚至不需要使用它们。不过，它们确实有助于防止编辑惊慌失措。基于此，我仍然认为我的方式是更有效的打字方式。
@DaanHeskes 还指出写出所有 :not() 案例不允许您使用变量来列出它们。

【解决方案5】：

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

我最终采用了这个策略：

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

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

【讨论】：