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 Default attribute values in DTDs。在CSS 3选择器中，它的子句6.3.4具有相同的名称。它建议：“选择器的设计应使其无论文档树中是否包含默认值，它们都能正常工作。”

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

Answer 3

因为，不应该这样做。

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

Answer 4

要符合所有浏览器，您应该始终声明输入类型。

有些浏览器会将默认类型视为“文本”，但这不是一个好习惯。

Answer 5

试试这个

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

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

5 个答案: