css - 这两个使用 “:not” 的选择器有什么区别？

Question

这两个选择器有什么区别？

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

请问 <input>没有 type 的标签选择属性？

我读过:

• Css pseudo classes input:not(disabled)not:[type="submit"]:focus

• CSS: multiple attribute selector

Answer 1

引用 the Selector Level 4 docs :

The negation pseudo-class, :not(), is a functional pseudo-class taking a selector list as an argument. It represents an element that is not represented by its argument.

Note: In Selectors Level 3, only a single simple selector was allowed as the argument to :not().

这就解释了为什么这......

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

... 在任何不实现这部分 CSS4 规范的浏览器中都不支持(据我所知，目前还没有人这样做；毕竟它只是一个工作草案)。但是这个选择器的逻辑也有缺陷:即使语法得到普遍支持，它也应该写成...

input:not([type="radio"],[type="submit"])

请参阅，[foo][bar] 规则被视为要求任何元素都 foo 和 bar。但是(当然!)任何输入都不可能同时是 radio 和 submit 类型。

底线:你必须使用...

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

...因为CSS3 only supports simple selectors在 :not.