CSS :not() 伪类可以有多个参数吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5684160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can the :not() pseudo-class have multiple arguments?
提问by delphi
I'm trying to select inputelements of all types except radioand checkbox.
我正在尝试选择除and之外input的所有types 的元素。radiocheckbox
Many people have shown that you can put multiple arguments in :not, but using typedoesn't seem to work anyway I try it.
许多人已经表明您可以在 中放入多个参数:not，但type无论如何我尝试使用它似乎不起作用。
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Any ideas?
有任何想法吗？
回答by Felix Kling
Why :not just use two :not:
为什么：不只是使用两个:not：
input:not([type="radio"]):not([type="checkbox"])
Yes, it is intentional
是的，这是故意的
回答by Daniel Tonon
If you're using SASS in your project, I've built this mixin to make it work the way we all want it to:
如果你在你的项目中使用 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;
}
}
it can be used in 2 ways:
它可以以两种方式使用：
Option 1: list the ignored items inline
选项 1：内联列出被忽略的项目
input {
/*non-ignored styling goes here*/
@include not('[type="radio"]','[type="checkbox"]'){
/*ignored styling goes here*/
}
}
Option 2: list the ignored items in a variable first
选项 2：首先列出变量中被忽略的项目
$ignoredItems:
'[type="radio"]',
'[type="checkbox"]'
;
input {
/*non-ignored styling goes here*/
@include not($ignoredItems){
/*ignored styling goes here*/
}
}
Outputted CSS for either option
任一选项的输出 CSS
input {
/*non-ignored styling goes here*/
}
input:not([type="radio"]):not([type="checkbox"]) {
/*ignored styling goes here*/
}
回答by Pieter Meiresone
Starting from CSS Selectors 4 using multiple arguments in the :notselector becomes possible (see here).
从 CSS Selectors 4 开始，在选择器中使用多个参数:not成为可能（请参阅此处）。
In CSS3, the :not selector only allows 1 selector as an argument. In level 4 selectors, it can take a selector list as an argument.
在 CSS3 中，:not 选择器只允许 1 个选择器作为参数。在第 4 级选择器中，它可以将选择器列表作为参数。
Example:
例子：
/* 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;
}
Unfortunately, browser support is limited. For now, it only works in Safari.
不幸的是，浏览器支持有限。目前，它仅适用于 Safari。
回答by eatCasserole
I was having some trouble with this, and the "X:not():not()" method wasn't working for me.
我在这方面遇到了一些麻烦，“X:not():not()”方法对我不起作用。
I ended up resorting to this strategy:
我最终采用了这个策略：
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
It's not nearly as fun, but it worked for me when :not() was being pugnacious. It's not ideal, but it's solid.
它几乎没有那么有趣，但是当 :not() 好斗时它对我有用。这并不理想，但它很坚固。
回答by Daniel Tonon
If you install the "cssnext" Post CSS plugin, then you can safely start using the syntax that you want to use right now.
如果您安装了“cssnext”Post CSS 插件，那么您可以安全地开始使用您现在想要使用的语法。
Using cssnext will turn this:
使用 cssnext 会变成这样：
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
Into this:
进入这个：
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
