更优雅的方式来表达 CSS 选择器答案

【问题标题】：More elegant way to express a CSS selector更优雅的方式来表达 CSS 选择器
【发布时间】：2015-08-19 13:00:33
【问题描述】：

有没有更优雅的方式来编写下面的 CSS 选择器？

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

我想匹配所有不是image 类型或submit 类型的HTML input 元素。

目标浏览器只有 Firefox，所以 Mozilla CSS 扩展没问题。

【问题讨论】：

Nothing... 只是因为:not([type="..."]) 的重复而不太优雅，但也许这是最好的写法？

标签： css firefox css-selectors

【解决方案1】：

有没有更优雅的方式来编写下面的 CSS 选择器？

不，没有。 Firefox 3 之前允许 :not() 包含任意数量的选择器，这些选择器可以让您编写

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

但这在技术上是一个错误，因为当时的语法没有任何标准，此后它不再适用于任何主要版本。不过，它现在位于Selectors 4，所以希望它很快就会回来。

Selectors 4 还包含 :matches()，它在 Firefox 中实现为 :-moz-any()，但是你不能使用它，因为它不接受否定（看到 :not() 无论如何都会有相同的扩展语法，它让彼此允许彼此是没有意义的，但是你想知道为什么他们没有实现:-moz-not() 来配合它）。

【讨论】：

是的，:-moz-not() 会很有用！

【解决方案2】：

你可以试试

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

但你的选择器匹配更好。

【讨论】：

这不是完全不同的东西吗？那匹配什么？
@RockPaperLizard：原理上是一样的。它匹配不满足任何给定条件的输入元素。唯一需要注意的是它实际上不起作用。
啊，谢谢。但它现在在 Firefox 中无效。我试了一下，但没有骰子。