问我应该使用CSS :disabled伪类还是[disabled]属性选择器，或者这是一个意见问题？

EN

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

• 属性是更新更好的

不是的；实际上，属性选择器从CSS2开始就存在了，而disabled属性本身从HTML 4开始就存在了。据我所知，:disabled伪类是在Selectors 3中引入的，这使得伪类更新。

• 使用

是有技术原因的

是的，在某种程度上。

有了属性选择器，您就可以知道您正在设计样式的文档利用disabled属性来指示禁用的字段。理论上，如果你的样式不是超文本标记语言，禁用的字段可能不会使用disabled属性来表示，例如，它可能是enabled="false"或类似的东西。即使是未来版本的超文本标记语言也可能引入新的元素，这些元素使用不同的属性来表示启用/禁用状态；这些元素不会与[disabled]属性选择器匹配。

:disabled伪类将选择器与您正在处理的文档解耦。该规范简单地声明它以被禁用的元素为目标，并且元素是否被启用、禁用或两者都不是，都是defined by the document language instead

构成启用状态、禁用状态和用户界面元素的内容与语言相关。在一个典型的文档中，大多数元素既不是:enabled也不是:disabled。

换句话说，当您使用伪类时，UA会根据您设计的样式自动确定要匹配哪些元素，因此您不必告诉它如何匹配。相反，属性选择器将匹配任何具有disabled属性的元素，而不管该元素实际上是否支持启用或禁用该元素，例如div。如果您正在使用依赖于这种非标准行为的众多现代框架中的一个，那么使用属性选择器可能会更好。

就DOM而言，我认为在DOM元素上设置disabled属性也会修改该元素的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样式，所以这些都不会对您造成任何影响，但是如果浏览器兼容性不是问题，我会选择:enabled和:disabled，而不是:not([disabled])和[disabled]，因为伪类包含属性选择器没有的语义。我就是那样的纯粹主义者。

事实证明，Internet Explorer10和11无法识别某些元素上的:disabled伪类，只能与属性选择器语法配合使用。

​

#test1:disabled { color: graytext; }
#test2[disabled] { color: graytext; }

<form>
<fieldset id="test1" disabled>:disabled</fieldset>
<fieldset id="test2" disabled>[disabled]</fieldset>
</form>

​

上面截取的代码在IE中呈现如下：

​

​

只要您只设计input元素的样式，这两种方法都应该没问题。不过，在您希望支持的所有浏览器中测试最终结果仍然是一个很好的建议。

显然，您只能使用“：(伪类)”/“：：”禁用选择和样式输入元素，但其他元素，如DIVs，必须使用disabled。

在编写SCSS / SASS并尝试选择一个禁用的元素时，我经常遇到这个问题。

请参阅CSS selector for disabled elements