Question

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

许多人已经证明您可以在:not中添加多个参数，但是使用type似乎无论如何我都不会尝试。

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

有什么想法吗？

Answer 1

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

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

_{是的，这是故意的}

Answer 2

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

Answer 3

从{4}}选择器中使用多个参数的CSS 4开始变得可能（see here）。

在CSS3中，：not selector仅允许1个选择器作为参数。在第4级选择器中，它可以将选择器列表作为参数。

示例：

:not

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

Answer 4

我遇到了一些麻烦，＆＃34; X：not（）：not（）＆＃34;方法对我不起作用。

我最终采用了这个策略：

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

它不是那么有趣，但在以下情况下它对我有用：不是（）是好斗的。它并不理想，但它很稳固。

Answer 5

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

使用cssnext可以将其打开：

$cats = get_categories($args);

对此：

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

http://cssnext.io/features/#not-pseudo-class

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

5 个答案: