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

5 回答

• 39

  原因：不只是使用两个 :not ：

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

  是的，这是有意的

  回复于 2024-05-10T03:55:28+08:00
• 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;
      }
  }
  

  它可以用于两种方式：

  Option 1: list the ignored items inline

  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

  $ignoredItems:
    '[type="radio"]',
    '[type="checkbox"]'
  ;
  
  input {
    /*non-ignored styling goes here*/
    @include not($ignoredItems){
      /*ignored styling goes here*/
    }
  }
  

  Outputted CSS for either option

  input {
      /*non-ignored styling goes here*/
  }
  
  input:not([type="radio"]):not([type="checkbox"]) {
      /*ignored styling goes here*/
  }
  

  回复于 2024-05-10T03:55:28+08:00
• 1280

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

  在CSS3中，：not selector仅允许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 .

  回复于 2024-05-10T03:55:28+08:00
• 20

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

  我最终诉诸于这个策略：

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

  它不是那么有趣，但它适用于我：不是（）是好斗的 . 它并不理想，但它很坚固 .

  回复于 2024-05-10T03:55:28+08:00
• 6

  如果你install the "cssnext" Post CSS plugin，那么你可以安全地开始使用你想要立即使用的语法 .

  使用cssnext将转为：

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

  进入这个：

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

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

  回复于 2024-05-10T03:55:28+08:00