我应该使用 CSS :disabled 伪类还是 [disabled] 属性选择器，还是见仁见智？

Posted 2023-02-22

【中文标题】我应该使用 CSS :disabled 伪类还是 [disabled] 属性选择器，还是见仁见智？

【英文标题】：Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

【发布时间】：2013-12-07 03:10:03

【问题描述】：

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

.myInput[disabled]  

或

.myInput:disabled  

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

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

属性更新更好 伪类仍然是要走的路 你最喜欢哪个 使用一个而不是另一个是有技术原因的

【问题讨论】：

我仍然使用两者来确保:disabled, [disabled] background-color: #eee;

【参考方案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 会根据您设置样式的文档自动计算出要匹配的元素，因此您不必告诉它如何匹配。相反，属性选择器将匹配具有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@ 仅仅是因为伪类带有属性选择器没有的语义。我就是这样的纯粹主义者。

【讨论】：

嗯。从来没有这样想过。但确实，我已经将 CSS 与 MXML（Flash UI 语言）以及 HTML 一起使用（尽管前者几乎不支持任何有用的东西）

还应考虑 disabled 属性对 HTML 字段集元素的影响。在 FF 和 Chrome（但不是 IE）中，将应用已禁用的后代控件的 state（由 :disabled 反映），但既不存在 content 属性也不存在 IDL 属性（属性） .见jsfiddle.net/UH2S4/12

好答案！您能否详细解释一下如何“UA 会自动找出要匹配的元素”？例如，使用一种独立的 XML 风格，如何使用 :disabled 伪类指定要选择的元素？

@chharvey：我不确定您是否能够使用 XSD 指定启用/禁用语义。这很可能是不可能的。有时，这种行为会内置到给定语言（HTML 等）的浏览器中。

在 Chrome 中测试时 :disabled 似乎只适用于输入元素。 [disabled] 适用于我测试的所有内容。

【参考方案2】：

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

【讨论】：

哪个版本的IE？

这在您的示例中无关紧要，但像 disabled 这样的属性意味着使用它们的名称、空字符串或什么都没有，甚至没有 =。在这里，您可以输入disabled="disabled" 或只是disabled，而不是disabled="true"。这可能就是 IE 失败的原因，尽管我对此表示怀疑。

我正在运行最新的 Microsoft Edge (25.10586.672.0)，它的工作方式与其他浏览器相同。如有疑问，请查看我是否可以使用：caniuse.com/#feat=css-sel3

【参考方案3】：

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

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

看 CSS selector for disabled elements

【讨论】：

Divs 不能被禁用，因此 :disabled 伪不适用于它们是有道理的。这不是 CSS 的错误，而是开发人员错误地认为他们可以将 disabled 属性应用于任何元素的错误。