CSS选择器有什么不同`:enabled` vs`not(:disabled)`

Question

是否有使用CSS3选择器行为或浏览器支持的差别:enabled还是not(:disabled)？

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

Answer 1

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

该规范证实了这一点:

构成启用状态,禁用状态和用户界面元素的内容取决于语言.在典型的文件中,大多数元素既不是:enabled也不是:disabled.

有趣的是,同样不能说:checked- 没有相应的:unchecked伪类,尽管并非所有元素都检查/取消选中语义.看看我对这个问题的回答.

如果您使用类型选择器(例如input,select或textarea)或类选择器限定这些伪类,您可能不必担心这一点.但是,使用它:enabled比使用更有意义:not(:disabled).

对大多数3级伪类的浏览器支持确实相同 - 没有已知的浏览器支持:enabled或:disabled仅支持.然而,根据MDN它看起来像歌剧9.0和Safari 3.1 不支持:not(),虽然他们支持:enabled和:disabled,和其他一些功能,如子串匹配的属性选择和一般的兄弟姐妹组合子~在IE7中支持的一些问题,并一点点在IE8中更好.