我应该使用CSS：禁用伪类或[disabled]属性选择器或者是一个意见的问题？

我试图风格禁用输入。我可以用：

.myInput[disabled] { }

要么

.myInput:disabled { }

是属性选择器是现代的CSS3方式还是前进的方式？我曾经使用伪类，但我找不到任何信息，他们是否是旧的方式，不会被支持或他们是否相等，你可以使用任何你最喜欢的。

我不需要支持旧的浏览器(它是一个内部网应用程序)，所以是：

>属性更新，更好
>伪类还是要走的路
>任何你最喜欢的
>有一个技术原因使用一个在另一个

解决方法

Is the attribute selector the modern CSS3 way and the way to go forward?

• attribute is newer and better

没有;实际上，属性选择器自CSS2以来一直存在，并且disabled属性本身自HTML 4以来就存在。据我所知，在Selectors 3中引入了：disabled伪类，这使得伪类更新。

• there’s a technical reason to use one over the other

是的，在一定程度上。

使用属性选择器，您需要知道您要设置样式的文档使用已禁用的属性来指示已禁用的字段。理论上，如果您对样式不是HTML的样式，禁用字段可能无法使用已禁用的属性来表示。它可能被启用=“假”或类似的东西。甚至未来的HTML版本可以引入新的元素，使用不同的属性来表示启用/禁用状态;这些元素将不匹配[disabled]属性选择器。

：disabled伪类将选择器与正在使用的文档断开连接。规范简单地说，它的目标元素被禁用，并且一个元素是否启用，禁用或两者，是defined by the document language instead：

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.

换句话说，当您使用伪类时，UA会根据您设计的文档自动计算出匹配的元素，因此您不必告诉它。

就DOM而言，我相信在DOM元素上设置disabled属性也会修改HTML元素的disabled属性，这意味着每个选择器与DOM操作之间没有区别。我不知道这是否是浏览器依赖，但here’s a fiddle，它演示了在所有主要浏览器的最新版本：

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

你最有可能会使用HTML样式，所以这一切都不会对你有任何影响，但如果浏览器兼容性不是一个问题，我会选择：启用和：禁用：通过([禁用])和[禁用]，因为伪类携带属性选择器不会的语义。我是一个纯粹主义者。