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

Question

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

.myInput[disabled] { } 

或

.myInput:disabled { } 

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

我有没有必要来支持旧的浏览器（这是一个Intranet应用程序），因此，它是：

• 属性是更新更好的
• 伪类仍然是去
• 方式为准你最喜欢
• 有一个技术理由使用了另一种

Answer 1

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

• 属性是更新更好的

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

• 有一个技术理由使用了另一种

是，在一定程度上。

使用属性选择器，您依赖的知识是您正在设计的文档使用disabled属性来指示禁用的字段。从理论上讲，如果您设计的不是HTML格式，禁用的字段可能不会使用disabled属性（例如，它可能是enabled="false"或类似的东西。即使将来的HTML版本也会引入新的元素，这些元素使用不同的属性来表示启用/禁用状态;那些元素将不匹配[disabled]属性选择器。

:disabled伪类将选择器从您正在处理的文档中分离出来。该规范只是说，它的目标是禁用的元素，而且元素是否被启用，禁用，或两者都不是，是defined by the document language instead：

何谓启用状态，禁用状态，并且用户界面元素依赖于语言。在典型的文件中，大多数元素既不是:enabled也不是: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，所以没有这可能使但是如果浏览器兼容性不是问题，我会选择:enabled和:disabled而不是:not([disabled])和[disabled]，因为伪类携带属性选择器不支持的语义。我是这样的纯粹主义者。

Answer 2

事实证明，Internet Explorer 10和11无法识别某些元素上的伪类，并且只能使用属性选择器语法正常工作。

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

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

上面剪断的代码呈现在IE中是这样的：

只要你只是造型input元素，你应该罚款无论哪种方式。在您希望支持的所有浏览器中测试最终结果仍然是一个很好的建议。