css - :required or [required] CSS selector

Question

浏览 MDN 文档以查看提议的伪类的状态时，我遇到了 :required(并且扩展为 :optional)。这两个都已经存在很长时间了，但我现在才刚刚了解到。

此选择器与使用属性选择器 [required] 有何不同。有区别吗？

input:required 或 input[required]。我承认 input:optional 比 input:not([required]) 更好。

如果没有任何区别，应该使用哪个或者根本不重要？为什么在属性选择器出现时引入这两个？

Answer 1

input:required {
  border-color: blue;
}

input[required] {
  background-color: pink;
}

<input type="text" required>

Does it differ?

看起来它们在功能上并没有什么不同。

If it doesn't differ in any way, which should be used or does it not matter at all?

在功能上，我认为这没有任何区别。然而，

Why were these two introduced when attribute selectors are around?

与 :valid 和 :invalid 等伪类一起，:required 和 :optional 提供了一个为 form 元素编写 css 的一致方式。我相信这是预期的目的(没有任何来源，只是我的假设)。

正如您还提到的，它确实有助于减少冗长，例如 :not([required])。