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

Question

默认输入类型是"text".我一直认为,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反映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默认为.)

Answer 2

根据CSS规范,浏览器可能会也可能不会使用有关默认属性的信息; 大多是不要的.CSS 2.1规范中的相关子句是5.8.2 DTD中的默认属性值.在CSS 3选择器中,它是第6.3.4节,具有相同的名称.它建议:"选择器的设计应使其无论文档树中是否包含默认值,它们都能正常工作."

通常最好明确指定基本属性,type=text而不是默认属性.原因是没有简单可靠的方法来引用input具有默认type属性的元素.

Answer 3

因为,它不应该这样做.

input[type=text] { } 是一个属性选择器,只会选择具有匹配属性的那些元素.