:not()伪类可以有多个参数吗?


745

我正在尝试选择和以外input的所有types的元素。radiocheckbox

许多人表明您可以在中放置多个参数:not,但是type无论如何,尝试使用似乎都行不通。

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

有任何想法吗?


24
“许多人表明您可以在:not中添加多个参数”或者这些人引用的是某些文章,但该文章被普遍引用但存在严重误导性,或者他们在谈论的是jQuery,而不是CSS。请注意,给定的选择器实际上在jQuery中有效,但在CSS中无效。我写了一个问答,详细介绍了它们之间的区别:stackoverflow.com/questions/10711730/…(答案还提到了侧面的文章)
BoltClock

10
恭喜你!在正式版发布之前的两年多时间内,您已经成功地在示例中编写了有效的CSS4.0。
杰克·吉芬

1
@杰克·吉芬(Jack Giffin):您指的是什么“正式版”?这个问题仅在选择器4的FPWD之前提前5个月,而规范仍遥遥无期:w3.org/TR/2011/WD-selectors4-20110929/#negation并在第一个实现之前4年半stackoverflow.com/questions/35993727/...
BoltClock

Answers:


1535

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

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

是的,这是故意的


4
这具有很高的特异性。
分心2015年

63
对于那些不幽默的人:他对:角色说“为什么不……” 。
totymedli 2015年

11
附带说明一下,如果您执行类似的操作input:not('.c1'), input:not('c2'),最终将遇到“和”情况,必须在输入中同时包含两个类才能使其匹配。
Cloudkiller

3
@BoltClock已延迟,但是也因此需要:not([attr],[attr])CSV格式:-P
TylerH

2
@Cloudkiller否,它将选择任何输入元素->“不带类c1的输入或不带类c2的输入”
David Callanan

48

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

6
难道不是像要求伐木工人去五金店去拿木头吗?
osirisgothra 2015年

什么?所以您宁愿写.selector:not(.one):not(.two):not(.three):not(.four){...}而不是.selector {@include not('。one',' .two','。three','。four'){...}}?
Daniel Tonon 2015年

2
在效率方面:是的。更少的'字符和imo更有效的代码。
大安2015年

:not()每个项目= 6个字符;'',=每个项目3个字符。@include应该分配给一个热键,因此我将其视为一个字符(按键入方式)。从技术上讲,如果您非常讨厌单引号,我什至不需要在列表中使用单引号。但是,它们确实有助于防止编辑大惊小怪。基于此,我仍然认为我的方式是更打字有效的方式来写出来。
Daniel Tonon 2015年

2
@DaanHeskes还指出,写出所有:not()情况不允许您使用变量将其列出。
plong0

30

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

不幸的是,浏览器支持有限。目前,它仅适用于Safari。


3
根据caniuse.com的说法,它仍然仅受Safari的支持
slanden

8
请记住,它的CSS选择器级别4,而不是CSS 4,没有CSS 4之类的东西,可能永远不会存在。
Edu Ruiz

8

我对此有些麻烦,并且“ X:not():not()”方法对我不起作用。

我最终采取了这种策略:

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

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.