79

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

.myInput[disabled] { }

或者

.myInput:disabled { }

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

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

  • 属性更新更好
  • 伪类仍然是要走的路
  • 无论你最喜欢哪个
  • 使用其中一个是有技术原因的
4

3 回答 3

82

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

  • 属性更新更好

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

  • 使用其中一个是有技术原因的

是的，在某种程度上。

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

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

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

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

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

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

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

于 2013-11-22T14:12:39.283 回答
19

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

于 2015-01-31T09:05:00.033 回答
6

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

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

禁用 元素的 CSS 选择器

于 2020-10-05T06:00:01.140 回答