【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>
我试图选择除radio
和checkbox
之外的所有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"])
是的,这是故意的
来源:oschina
链接:https://my.oschina.net/u/3797416/blog/3153950