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

谁说胖子不能爱 提交于 2020-01-06 15:36:29

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

我试图选择除radiocheckbox之外的所有type s的input元素。

许多人表明,您可以在:not多个参数,但是无论如何我尝试都不能使用type

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

有任何想法吗?


#1楼

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

我最终采取了这种策略:

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

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


#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*/
}

#3楼

从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。


#4楼

如果安装了“ cssnext” Post CSS插件 ,则可以安全地开始使用现在要使用的语法。

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


#5楼

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

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

是的,这是故意的

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!