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

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

.myInput[disabled] { }

要么

.myInput:disabled { }

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

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

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

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

• 属性是更新更好的

没有; 实际上，从CSS2开始，属性选择器disabled就存在了，而从HTML 4开始，属性本身就存在了。据我所知，: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]简单，因为伪类携带语义属性选择呢不。我是一个纯粹主义者。

事实证明，Internet Explorer 10和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元素，无论哪种方式都应该没问题。在您希望支持的所有浏览器中测试最终结果仍然是一个很好的建议。

显然，您只能使用“：（pseudoclass）” /“：disabled”来选择和设置输入元素的样式，但是其他元素（例如DIV）必须改为使用[disabled]。

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

请参阅 CSS选择器以了解禁用的元素