css - input[type ='text' ] CSS 选择器不适用于默认类型的文本输入？

Question

默认输入类型是“文本”。我一直假设以 input[type='text'] 为目标的 CSS 声明会影响这些输入，即使类型没有在控件上显式声明也是如此。但是，我刚刚注意到我的默认类型文本输入没有获得样式。为什么会这样？我该如何解决这个问题？

input[type='text'] {
  background: red;
}

<input name='t1' type='text' /> /* Is Red */
<input name='t1' /> /* Is Not Red */

Answer 1

CSS 仅使用 DOM 树中的数据，这与渲染器如何决定如何处理缺少属性的元素无关。

所以要么让 CSS 反射(reflect) HTML

input:not([type]), input[type="text"]
{
background:red;
}

或使 HTML 显式化。

<input name='t1' type='text'/> /* Is Not Red */

如果它不这样做，你永远无法区分

element { ...properties... }

和

element[attr] { ...properties... }

因为所有属性总是会在所有元素上定义。 (例如，table 总是有一个 border 属性，默认为 0。)