这两个选择器使用":not"有什么区别？

Question

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

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

是否会选择<input>没有type属性的标签？

我读了:

• Css伪类输入:not(禁用)not:[type ="submit"]:focus

• CSS:多个属性选择器

Answer 1

引用Selector Level 4文档:

否定伪类:not()是一个以选择器列表作为参数的函数伪类 .它表示一个未由其参数表示的元素.

注意:在选择器级别3中,只允许使用一个简单选择器作为参数: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仅支持简单的选择在:not.