input CSSselect器不适用于默认types的文本input？

默认inputtypes是“文本”。 我一直认为，即使未在控件上明确声明types，针对input[type='text'] CSS声明也会影响这些input。 但是，我只是注意到，我的默认types的文本input不会得到样式。 这是为什么？ 我该如何解决这个问题？

CSS

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

HTML

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

http://jsfiddle.net/LhnNM/

Answer 1

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

所以要么让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 3select器中，它是第6.3.4节 ，具有相同的名称。 它build议：“select器的devise应该使它们工作，无论文档树中是否包含默认值。”

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

Answer 3

因为，它不应该这样做。

input[type=text] { }是属性select器，只会select具有匹配属性的元素。

Answer 4

为了符合所有的浏览器，你应该总是声明inputtypes。

一些浏览器将默认types设置为“文本”，但这不是一个好的做法。

Answer 5

尝试这个

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