我正在尝试设置禁用输入的样式。我可以使用：
.myInput[disabled] { }
或
.myInput:disabled { }
属性选择器是现代 CSS3 的方式和前进的方式吗？我曾经使用过伪类，但我找不到任何关于它们是否是旧方法并且不受支持或者它们是否相等并且你可以使用任何你喜欢的东西的信息。
我不需要支持旧的浏览器（它是一个内网应用程序），它是这样的：
【问题讨论】：
:disabled, [disabled] {background-color: #eee;}
标签： css css-selectors pseudo-class disabled-input
属性选择器是现代 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 会根据您设置样式的文档自动计算出要匹配的元素，因此您不必告诉它如何匹配。相反，属性选择器将匹配具有disabled 属性的任何元素，而不管该元素实际上是否支持启用或禁用，例如div。如果您正在使用依赖此类非标准行为的众多现代框架之一，则使用属性选择器可能会更好。
就 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]) 和 @ 987654344@ 仅仅是因为伪类带有属性选择器没有的语义。我就是这样的纯粹主义者。
【讨论】：
:disabled 反映），但既不存在 content 属性也不存在 IDL 属性（属性） .见jsfiddle.net/UH2S4/12
:disabled 伪类指定要选择的元素？
: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 元素的样式，无论哪种方式都应该没问题。在您希望支持的所有浏览器中测试最终结果仍然是一个很好的建议。
【讨论】：
disabled 这样的属性意味着使用它们的名称、空字符串或什么都没有，甚至没有 =。在这里，您可以输入disabled="disabled" 或只是disabled，而不是disabled="true"。这可能就是 IE 失败的原因，尽管我对此表示怀疑。
显然，您只能选择输入元素并设置其样式使用 ":(pseudoclass)" / ":disabled" ，但其他元素（例如 DIV）必须改为使用 [disabled]。 p>
我在编写 SCSS / SASS 并尝试选择禁用的元素时经常遇到这个问题。
【讨论】：