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

CSS

猿前端

2020-03-16

我正在尝试选择和以外input的所有types的元素。radiocheckbox

许多人表明您可以在中放置多个参数:not，但是type无论如何尝试使用似乎都行不通。

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

有任何想法吗？

第1747篇《：not（）伪类可以有多个参数吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
猿西门Tom 2020.03.16

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

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

是的，这是故意的

乐小胖 2020.03.16

我对此有些麻烦，并且“ X：not（）：not（）”方法对我不起作用。

我最终采取了这种策略：

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

它几乎没有那么有趣，但是当：not（）好战时，它对我有用。这不是理想的，但很可靠。

猴子Gil 2020.03.16

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

小胖Stafan 2020.03.16

如果安装了“ 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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android