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

Question

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

.myInput[disabled] { }

或

.myInput:disabled { }

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

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

• 属性更新更好
• 伪班仍然是要走的路
• 无论你最喜欢哪个
• 使用其中一个
的技术原因

Answer 1

  

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

  

  
• 属性更新更好
  

没有;实际上，属性选择器自CSS2起就存在，disabled属性本身自HTML 4以来就存在。据我所知，: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而不是{ {1}}和:not([disabled])只是因为伪类带有属性选择器没有的语义。我是那样的纯粹主义者。

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

上面提到的代码在IE中呈现如下：

只要你只设计input个元素，你就应该没问题。在您希望支持的所有浏览器中测试最终结果仍然是一个很好的建议。

Answer 3

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

>

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

请参阅 CSS selector for disabled elements