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

Question

我正在尝试设置禁用输入的样式。我可以用：

.myInput[disabled] { }

要么

.myInput:disabled { }

属性选择器是现代CSS3方式还是前进的方式？我曾经使用伪类，但是找不到关于它们是否是旧方法并且将不被支持或者它们是否相等的任何信息，您可以使用最喜欢的任何方法。

我不需要支持较旧的浏览器（这是一个Intranet应用程序），因此：

• 属性是更新更好的
• 伪类仍然是要走的路
• 无论您最喜欢哪个
• 有一个技术上的理由要使用另一个

Answer 1

属性选择器是现代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 input
document.querySelector('input:first-child').disabled = false;

您最有可能将HTML样式化，因此这对您没有任何影响，但是如果浏览器兼容性不是问题，我将选择:enabled并:disabled结束:not([disabled])，[disabled]仅仅是因为伪类带有属性选择器所做的语义不。我是一个纯粹主义者。