我应该使用CSS：disabled伪类还是[disabled]属性选择器，还是见仁见智？

我应该使用CSS：disabled伪类还是[disabled]属性选择器，还是见仁见智？

属性选择器是现代CSS3方式还是前进的方式？

• 属性是更新更好的
  
  

没有; 实际上，从CSS2开始，属性选择器

disabled

就存在了，而从HTML4开始，属性本身就存在了。据我所知，

:disabled

伪类是在选择器3中引入的，这使伪类更新了。

• 有一个技术上的理由要使用另一个

是的，在某种程度上。

使用属性选择器，您将依赖于您正在设计样式的文档利用

disabled

属性来指示禁用字段的知识。从理论上讲，如果您要样式化的不是HTML，则禁用的字段可能不会使用

disabled

属性来表示，例如它可能是

enabled="false"

或类似的东西。甚至将来的HTML版本都可能引入新元素，这些元素利用不同的属性来表示启用/禁用状态。这些元素将与

[disabled]

属性选择器不匹配。

该

:disabled

伪类解耦您正在使用的文件的选择。规范仅声明它针对已禁用的元素，而元素是启用，禁用还是两者都不是由文档语言定义：

构成启用状态，禁用状态和用户界面元素的方式与语言有关。在典型的文档中，大多数元素都不

:enabled

是

:disabled

。

换句话说，当您使用伪类时，UA会根据您要设置样式的文档自动找出要匹配的元素，因此您不必告诉它如何。

就DOM而言，我认为

disabled

在DOM元素上设置属性也会修改HTML元素的

disabled

属性，这意味着在使用DOM的选择器之间没有区别。我不确定这是否与浏览器有关，但是下面的小提琴在所有主要浏览器的最新版本中进行了演示：

// The following statement removes the disabled attribute from the first inputdocument.querySelector('input:first-child').disabled = false;

您最有可能将HTML样式化，因此这对您没有任何影响，但是如果浏览器兼容性不是问题，我将选择

:enabled

并

:disabled

结束

:not([disabled])

，

[disabled]

仅仅是因为伪类带有属性选择器所做的语义不。我是一个纯粹主义者。