css - CSS 选择器 `:enabled` 与 `not(:disabled)` 有区别吗

Question

使用 CSS3 选择器 :enabled 或 not(:disabled) 在行为或浏览器支持方面是否存在差异？

我希望它们在功能上是相同的，因为它们都是 CSS3 选择器，所以浏览器支持也应该是相同的。

Answer 1

是的，有区别 — :not(:disabled) 可以匹配 既不是 :enabled 也不是 的元素:禁用。这些是启用/禁用语义根本不适用的元素，例如 div、p、ul 等。

spec证实这一点:

What constitutes an enabled state, a disabled state, and a user interface element is language-dependent. In a typical document most elements will be neither :enabled nor :disabled.

有趣的是，对于 :checked 却不是这样——没有相应的 :unchecked 伪类，尽管并非所有元素都已检查/未经检查的语义。请参阅我对 this question 的回答.

如果您使用类型选择器(例如 input、select 或 textarea)或类选择器来限定这些伪类，您可能不必担心这一点。不过，使用 :enabled 比 :not(:disabled) 更有意义。

浏览器对大多数 3 级伪类的支持确实是相同的——没有已知的浏览器只支持 :enabled 或 :disabled。然而，根据 MDN，它看起来像 Opera 9.0 和 Safari 3.1 don't support :not() , 尽管他们确实支持 :enabled和 :disabled ，以及一些其他功能，如子字符串匹配属性选择器和通用兄弟组合器 ~ 在 IE7 中受支持，但存在一些问题，在 IE8 中稍微好一点。