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

Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

提问by Peter

I'm trying to style a disabled input. I can use:

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

.myInput[disabled] { }

or

或者

.myInput:disabled { }

Is the attribute selector the modern CSS3 way and the way to go forward? I used to use the pseudo-class, but I can't find any info on whether they are the old way and won't be supported or whether they're both equal and you can use whatever you like best.

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

I have no need to support older browsers (it's an intranet application), so is it:

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

• attribute is newer and better
• pseudo-class is still the way to go
• whichever you like best
• there's a technical reason to use one over the other

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

回答by BoltClock

Is the attribute selector the modern CSS3 way and the way to go forward?

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

• attribute is newer and better

• 属性更新更好

No; actually, attribute selectors have been around since CSS2, and the disabledattribute itself has existed since HTML 4. As far as I know, the :disabledpseudo-class was introduced in Selectors 3, which makes the pseudo-class newer.

不; 实际上，属性选择器从CSS2 开始disabled就已经存在，属性本身从HTML 4 开始就已经存在。据我所知，:disabled伪类是在Selectors 3中引入的，这使得伪类更新。

• there's a technical reason to use one over the other

• 使用一个而不是另一个是有技术原因的

Yes, to some extent.

是的，在某种程度上。

With an attribute selector, you're relying on the knowledge that the document you're styling makes use of a disabledattribute to indicate disabled fields. Theoretically, if you were styling something that wasn't HTML, disabled fields might not be represented using a disabledattribute, e.g. it might be enabled="false"or something like that. Even future editions of HTML could introduce new elements that make use of different attributes to represent enabled/disabled state; those elements wouldn't match the [disabled]attribute selector.

使用属性选择器，您依赖于您正在设置样式的文档使用disabled属性来指示禁用字段的知识。从理论上讲，如果您正在设置非 HTML 的样式，则可能无法使用disabled属性来表示禁用字段，例如它可能是enabled="false"或类似的东西。甚至未来版本的 HTML 也会引入新元素，这些元素使用不同的属性来表示启用/禁用状态；这些元素与[disabled]属性选择器不匹配。

The :disabledpseudo-class decouples the selector from the document you're working with. The spec simply states that it targets elements that are disabled, and that whether an element is enabled, disabled, or neither, is defined by the document language instead:

该:disabled伪类解耦您正在使用的文件的选择。该规范只是声明它针对被禁用的元素，并且元素是启用、禁用还是两者都不启用，而是由文档语言定义：

What constitutes an enabled state, a disabled state, and a user interface element is language-dependent. In a typical document most elements will be neither :enablednor :disabled.

什么构成启用状态、禁用状态和用户界面元素取决于语言。在典型的文档中，大多数元素既不是:enabled也不是:disabled。

In other words, when you use the pseudo-class, the UA automatically figures out which elements to match based on the document you're styling, so you don't have to tell it how.

换句话说，当您使用伪类时，UA 会根据您正在设置样式的文档自动确定要匹配的元素，因此您不必告诉它如何匹配。

In terms of the DOM, I believe setting the disabledproperty on a DOM element also modifies the HTML element's disabledattribute, which means there's no difference between either selector with DOM manipulation. I'm not sure if this is browser-dependent, but here's a fiddlethat demonstrates it in the latest versions of all major browsers:

就 DOM 而言，我相信disabled在 DOM 元素上设置属性也会修改 HTML 元素的disabled属性，这意味着两个选择器与 DOM 操作之间没有区别。我不确定这是否依赖于浏览器，但这里有一个在所有主要浏览器的最新版本中演示的小提琴：

// The following statement removes the disabled attribute from the first input
document.querySelector('input:first-child').disabled = false;

You're most likely going to be styling HTML, so none of this may make any difference to you, but if browser compatibility isn't an issue I would choose :enabledand :disabledover :not([disabled])and [disabled]simply because the pseudo-classes carry semantics that the attribute selector does not. I'm a purist like that.

你最有可能会被造型HTML，所以没有这种可能作出的任何区别给你，但如果浏览器的兼容性不是一个问题，我会选择:enabled，并:disabled在:not([disabled])和[disabled]简单，因为伪类携带语义属性选择呢不是。我就是这样的纯粹主义者。

回答by GOTO 0

It turns out that Internet Explorer 10 and 11 fail to recognize the :disabledpseudoclass on some elements and only works fine with the attribute selector syntax.

事实证明，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>

The code snipped above renders in IE like this:

上面截取的代码在 IE 中呈现如下：

As long as you're only styling inputelements, you should be fine either way. Still it's a good advice to test the final result in all browsers you wish to support.

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