我应该使用 CSS :disabled 伪类还是 [disabled] 属性选择器，还是见仁见智? [英] Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

问题描述

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

.myInput[禁用] { }

或

.myInput:disabled { }

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

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

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

解决方案

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

<块引用>

• 属性更新更好

没有；实际上，属性选择器从 CSS2 就已经存在，而 disabled 属性本身自 HTML 4.据我所知， :disabled 伪类是在 Selectors 3，这使得伪类更新.

<块引用>

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

在某种程度上是的.

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

:disabled 伪类将选择器与您正在使用的文档分离.该规范只是声明它针对被禁用的元素，并且元素是启用、禁用还是两者都不启用，是 由文档语言定义:

<块引用>

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

换句话说，当您使用伪类时，UA 会根据您设置样式的文档自动确定要匹配的元素，因此您不必告诉它如何匹配.相反，属性选择器将匹配任何具有 disabled 属性的元素，而不管该元素实际上是否支持启用或禁用，例如 div.如果您正在使用依赖此类非标准行为的众多现代框架之一，则使用属性选择器可能会更好.

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

//以下语句从第一个输入中删除 disabled 属性document.querySelector('input:first-child').disabled = false;

您很可能会为 HTML 设置样式，因此这些都不会对您产生任何影响，但如果浏览器兼容性不是问题，我会选择 :enabled 和 :disabled 优于 :not([disabled]) 和 [disabled] 仅仅是因为伪类带有属性选择器没有的语义.我就是这样的纯粹主义者.

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.

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

解决方案

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

• attribute is newer and better

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

• 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 disabled attribute to indicate disabled fields. Theoretically, if you were styling something that wasn't HTML, disabled fields might not be represented using a disabled attribute, 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.

The :disabled pseudo-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:

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 :enabled nor :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. Conversely, the attribute selector would match any element with a disabled attribute, regardless of whether that element actually supports being enabled or disabled, such as div. If you're using one of the many modern frameworks that rely on such non-standard behavior, you may be better served by using the attribute selector.

In terms of the DOM, I believe setting the disabled property on a DOM element also modifies the HTML element's disabled attribute, 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 fiddle that demonstrates it in the latest versions of all major browsers:

// 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 :enabled and :disabled over :not([disabled]) and [disabled] simply because the pseudo-classes carry semantics that the attribute selector does not. I'm a purist like that.

这篇关于我应该使用 CSS :disabled 伪类还是 [disabled] 属性选择器，还是见仁见智?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！