我应该使用CSS：禁用伪类或[disabled]属性选择器或者是一个意见的问题？ [英] Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?

问题描述

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

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

.myInput[disabled] { }

或

.myInput:disabled { }

属性选择器是现代的CSS3方式还是前进的方式？我曾经使用伪类，但我找不到任何信息，无论他们是旧的方式，不会被支持或他们是否相等，你可以使用任何你最喜欢的

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

推荐答案

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

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

• 属性较新且更好

否;实际上，自 CSS2 开始，属性选择器已存在，而禁用属性本身自 HTML 4 开始已存在。据我所知，在：disabled 伪类enabled disabled>选择器3 ，这使得伪类更新。

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.

是在某种程度上。

使用属性选择器，你依赖于知道你的样式文档使用 disabled 属性来指示禁用字段。理论上，如果你的样式不是HTML，禁用字段可能不会使用 disabled 属性来表示，例如。它可能是 enabled =false或类似的东西。甚至未来的HTML版本可以引入新的元素，使用不同的属性来表示启用/禁用状态;这些元素将不匹配 [disabled] 属性选择器。

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.

：disabled 伪类将选择器与您正在使用的文档断开连接。规范简单地声明，它定位的元素被禁用，并且元素是否启用，禁用或两者都是定义由文档语言代替：

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:

什么构成启用状态，禁用状态和用户界面元素是语言 - 依赖。在典型的文档中，大多数元素既不是：enabled 也不是：disabled 。

换句话说，当您使用伪类时，UA会根据您设置的文档自动计算出匹配的元素，因此您不必

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.

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

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;

你最有可能是HTML样式，所以这一切都不会对你有任何影响，但如果浏览器兼容性不是一个问题，我会选择：enabled 和：disabled over ：not（[disabled]）和 [disabled] ，因为伪类携带属性选择器没有的语义。我是一个纯粹主义者。

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]属性选择器或者是一个意见的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！