我正在尝试选择除 radio
和 checkbox
之外的所有 type
的 input
元素。
许多人已经表明您可以在 :not
中放置多个参数,但无论如何使用 type
似乎都不起作用,我尝试了一下。
form input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
有任何想法吗?
为什么:不只是使用两个:not
:
input:not([type="radio"]):not([type="checkbox"])
是的,这是故意的
如果你在你的项目中使用 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*/
}
'
个字符和 imo 更高效的代码。
:not()
= 每个项目 6 个字符; '',
= 每个项目 3 个字符。 @include
应该分配给一个热键,所以我将把它算作一个字符(就键入而言)。从技术上讲,如果您非常讨厌列表中的单引号,我认为您甚至不需要使用它们。不过,它们确实有助于防止编辑惊慌失措。基于此,我仍然认为我的方式是更有效的打字方式。
从 CSS 选择器 4 开始,在 :not
选择器中使用多个参数成为可能 (see here)。
在 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;
}
不幸的是,浏览器支持是 somewhat new。
我遇到了一些麻烦,“X:not():not()”方法对我不起作用。
我最终采用了这个策略:
INPUT {
/* styles */
}
INPUT[type="radio"], INPUT[type="checkbox"] {
/* styles that reset previous styles */
}
它几乎没有那么有趣,但是当 :not() 好斗时它对我有用。这不是理想的,但它是坚实的。
如果您install the "cssnext" Post CSS plugin,那么您可以安全地开始使用您想立即使用的语法。
使用 cssnext 会变成这样:
input:not([type="radio"], [type="checkbox"]) {
/* css here */
}
进入这个:
input:not([type="radio"]):not([type="checkbox"]) {
/* css here */
}
https://cssnext.github.io/features/#not-pseudo-class
:
字符说“为什么不......”。input:not('.c1'), input:not('c2')
之类的操作,您最终会遇到“与”情况,即两个类都必须在输入上才能匹配。:not([attr],[attr])
CSV 格式:-P