浏览MDN文档以查看提议的伪类的状态,我发现了:required个(扩展到:optional个).这两个都已经存在很长时间了,但我现在才刚刚了解到它们.

此 Select 器与使用属性 Select 器[required]有何不同.有什么不同吗?

input:requiredinput[required].我承认input:optionalinput:not([required])要好.

如果它在任何方面都没有区别,那么应该使用哪一个,或者根本不重要?为什么在有属性 Select 器的时候引入了这两个?

推荐答案

input:required {
  border-color: blue;
}

input[required] {
  background-color: pink;
}
<input type="text" required>

有什么不同吗?

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

如果它在任何方面都没有区别,那么应该使用哪一个,或者根本不重要?

在功能上,我不认为这有什么不同.然而,

为什么在有属性 Select 器的时候引入了这两个?

:valid和:invalid这样的伪类一起,:required:optionalform个元素提供了一种一致的方式来编写CSS.我相信这就是预期的目的(没有任何来源,只是我的假设).

正如您还提到的,它确实有助于减少诸如:not([required])这样的冗长.

Css相关问答推荐

如何在移动屏幕尺寸上包装元素?

在NextJS/Reaction应用程序中显示更新问题

SVG文本在移动浏览器上增长并溢出

无法在 React 组件 (TypeScript) 中应用 Tailwind CSS 类

如何引用 SCSS 中的现有类?

使用 Flex 容器,如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度?

在 CSS 中,如何用破折号填充段落中每一行的空白区域?

背景图像允许溢出输入按钮

通过 CSS 中的媒体查询更改站点的页面大小

包含tailwind 中固定纵横比框的内容

Flexbox 子高度它的内容

全部:初始与使用 CSS 重置

有没有办法让 mui v5 呈现没有 css-xxx 前缀的类名?

在样式化组件中使图像重叠

我应该避免使用text-align: justify;吗?

为什么在 CSS3 中启用硬件加速会降低性能?

Select 器.class.class和.class.class有什么区别?

更改 FontAwesome 图标的字体粗细?

仅针对使用的类优化 Font Awesome

CSS 网格中的 justify-self、justify-items 和 justify-content 有什么区别?